/* * Vitrine de lastnod.com (#4455, version 2 #4535). Texte et intentions : docs/contexte-projet/vitrine.md. * * Système de couleur : le travail des agents est en lumière froide (violet de * marque, cyan), le geste de l'humain est la seule lumière chaude (or). Tout ce * qui est « à vous » est or, et seulement cela. Jetons repris de la refonte du * produit (#4224, assets/styles/_socle.css du dev), clair et sombre (#4431). * Équipe : chef de projet violet, secrétaire rose, commercial bleu, développeur cyan. * * Le mode suit le système ; (theme.js) impose le choix du * visiteur. Une seule déclaration par couleur grâce à light-dark(). * Sans script, tout se lit ; prefers-reduced-motion donne des états fixes complets. */ /* Polices du produit, auto-hébergées (licence SIL OFL 1.1, docs/POLICES.md du dev) */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("polices/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("polices/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("polices/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("polices/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("polices/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("polices/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("polices/jetbrains-mono-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("polices/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Propriétés animables : l'angle des bordures vivantes, le ciel de la journée. */ @property --angle { syntax: ""; inherits: false; initial-value: 0deg; } @property --ciel-1 { syntax: ""; inherits: true; initial-value: transparent; } @property --ciel-2 { syntax: ""; inherits: true; initial-value: transparent; } :root { color-scheme: dark light; interpolate-size: allow-keywords; --violet: #7451ff; /* Les quatre teintes du dégradé du nouveau logo (#5223) : casquettes et points des rôles. */ --logo-cyan: #00aeff; --logo-bleu: #3584fe; --logo-violet: #9057f9; --logo-rose: #fe67c0; --violet-clair: #8b68ff; --cyan: #22d3ee; --or: #ffc861; --or-clair: #ffd98f; --or-fonce: #ffb454; --sur-or: #1f1503; --fond: light-dark(#f4f4f8, #07080b); --fond-2: light-dark(#ebebf3, #0b0c10); --surface: light-dark(#ffffff, #0e0f13); --surface-2: light-dark(#f7f7fa, #14151a); --surface-3: light-dark(#eeeef4, #1b1d23); --filet: light-dark(rgb(16 18 30 / .10), rgb(255 255 255 / .08)); --filet-fort: light-dark(rgb(16 18 30 / .18), rgb(255 255 255 / .15)); --voile: light-dark(rgb(255 255 255 / .72), rgb(10 11 15 / .66)); --fg-fort: light-dark(#0b0c0f, #f7f8fa); --fg: light-dark(#262930, #cdd1da); --fg-doux: light-dark(#3d414b, #a4a9b6); --fg-pale: light-dark(#585e6d, #858b9b); --decor: light-dark(#b5bac6, #3a3e48); --marque: light-dark(#5b2fe0, #a98fff); --vif: light-dark(#0b6782, #57e9fb); --chaud: light-dark(#8a5a00, #ffc861); --or-voile: light-dark(rgb(255 180 84 / .16), rgb(255 200 97 / .09)); --or-filet: light-dark(rgb(176 110 0 / .45), rgb(255 200 97 / .42)); --rose: #d9468f; --bleu: #3b6cf6; --rose-texte: light-dark(#a3245f, #f39ac7); --froid-voile: light-dark(rgb(116 81 255 / .08), rgb(116 81 255 / .12)); --ombre-douce: 0 1px 0 0 light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .05)) inset, 0 1px 2px light-dark(rgb(20 20 50 / .06), rgb(0 0 0 / .4)), 0 24px 48px -24px light-dark(rgb(40 30 90 / .18), rgb(0 0 0 / .7)); --ombre-haute: 0 0 0 1px var(--filet), 0 40px 120px -40px light-dark(rgb(60 40 140 / .35), rgb(0 0 0 / .9)), 0 20px 50px -30px light-dark(rgb(20 20 50 / .25), rgb(0 0 0 / .8)); --ecriture: ui-sans-serif; --sans: "Inter", var(--ecriture), system-ui, -apple-system, "Segoe UI", sans-serif; --titre: "Space Grotesk", "Inter", var(--ecriture), system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, var(--ecriture), monospace; --expo: cubic-bezier(.16, 1, .3, 1); --cycle: 14s; --barre: 64px; } :root[data-theme="clair"] { color-scheme: light; } :root[data-theme="sombre"] { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barre) + 1rem); -webkit-text-size-adjust: 100%; } body { margin: 0; font: 400 1rem/1.6 var(--sans); color: var(--fg); background: var(--fond); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } h1, h2, h3 { font-family: var(--titre); color: var(--fg-fort); text-wrap: balance; margin: 0; } p { margin: 0; text-wrap: pretty; } a { color: var(--marque); text-underline-offset: .2em; } ul, ol { margin: 0; padding: 0; list-style: none; } svg { display: block; } :focus-visible { outline: 3px solid var(--vif); outline-offset: 3px; border-radius: 6px; } ::selection { background: color-mix(in oklch, var(--violet) 40%, transparent); } .lecteur { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .evitement { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; border-radius: .6rem; background: var(--surface); color: var(--fg-fort); } .evitement:focus { top: 1rem; } .cadre { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .cadre--large { max-width: 1320px; } .cadre--etroit { max-width: 780px; } .texte-or { color: var(--chaud); } .icone { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* ------------------------------------------------------------------ Barre */ .barre { position: sticky; top: 0; z-index: 50; height: var(--barre); background: color-mix(in oklab, var(--fond) 72%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--filet); } .barre__cadre { height: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); display: flex; align-items: center; gap: 1.25rem; } .marque { display: inline-flex; align-items: center; gap: .6rem; font: 700 1.2rem/1 var(--titre); letter-spacing: -.02em; color: var(--fg-fort); text-decoration: none; } .marque__signe { flex: none; width: 32px; height: 32px; } /* Le logo complet (#5223) : la copie au nom bleu nuit en clair, la blanche en sombre. */ .logo { display: block; width: auto; height: 38px; } .logo--sombre { display: none; } :root[data-theme="sombre"] .logo--clair { display: none; } :root[data-theme="sombre"] .logo--sombre { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .logo--clair { display: none; } :root:not([data-theme="clair"]) .logo--sombre { display: block; } } /* La coche du logo, la bulle à coche du symbole au trait (_vitrine_macros, coche()). */ .coche { display: block; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } /* Son halo : le même trait, large, pâle et flou, montré quand la coche s'allume. */ .coche__halo { stroke-width: 6; filter: blur(1.2px); opacity: 0; transition: opacity .5s; } .barre__nav { display: flex; gap: .25rem; margin-inline-start: auto; } .barre__nav a { color: var(--fg-doux); text-decoration: none; font-size: .92rem; font-weight: 500; padding: .45rem .75rem; border-radius: 999px; transition: color .2s, background .2s; } .barre__nav a:hover { color: var(--fg-fort); background: var(--filet); } .theme { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; border: 1px solid var(--filet); background: var(--surface-2); } .theme[hidden] { display: none; } .theme label { position: relative; display: grid; place-items: center; width: 30px; height: 26px; border-radius: 999px; color: var(--fg-pale); cursor: pointer; transition: color .2s, background .2s; } .theme input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .theme .icone { width: 16px; height: 16px; } .theme label:has(input:checked) { background: var(--surface); color: var(--fg-fort); box-shadow: 0 1px 3px rgb(0 0 0 / .25); } .theme label:has(input:focus-visible) { outline: 2px solid var(--vif); outline-offset: 1px; } @media (max-width: 1023px) { .barre__nav { display: none; } .theme, .theme[hidden] + .langues { margin-inline-start: auto; } } @media (max-width: 479px) { .barre .bouton--petit { display: none; } } /* ---------------------------------------------------------------- Boutons */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.25rem; padding: .85rem 1.5rem; border-radius: 999px; font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 0; transition: transform .25s var(--expo), box-shadow .25s, background .25s; } .bouton .icone { width: 1.1em; height: 1.1em; transition: transform .25s var(--expo); } .bouton:hover .icone { transform: translateX(3px); } .bouton--or { color: var(--sur-or); background: linear-gradient(180deg, var(--or-clair), var(--or) 45%, var(--or-fonce)); box-shadow: 0 0 0 1px rgb(255 214 140 / .6) inset, 0 1px 0 rgb(255 255 255 / .6) inset, 0 10px 30px -10px rgb(255 180 84 / .75), 0 0 0 1px rgb(150 90 0 / .25); } .bouton--or:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgb(255 214 140 / .7) inset, 0 1px 0 rgb(255 255 255 / .7) inset, 0 16px 44px -12px rgb(255 180 84 / .95), 0 0 0 1px rgb(150 90 0 / .3); } .bouton--or:focus-visible { outline-color: var(--or); } .bouton--petit { min-height: 2.4rem; padding: .5rem 1.05rem; font-size: .9rem; } .bouton--plein { width: 100%; } /* -------------------------------------------------------------- Ouverture */ .ouverture { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 8vw, 7rem); isolation: isolate; overflow: clip; } .ouverture__aurore, .courte__aurore { position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; } .ouverture__aurore::before, .ouverture__aurore::after, .courte__aurore::before, .courte__aurore::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); } .ouverture__aurore::before, .courte__aurore::before { width: 60vw; height: 46vw; left: 8%; top: 4%; background: radial-gradient(closest-side, light-dark(rgb(116 81 255 / .28), rgb(116 81 255 / .42)), transparent); animation: derive 18s ease-in-out infinite alternate; } .ouverture__aurore::after, .courte__aurore::after { width: 48vw; height: 38vw; right: 4%; top: 14%; background: radial-gradient(closest-side, light-dark(rgb(34 211 238 / .22), rgb(34 211 238 / .26)), transparent); animation: derive 22s ease-in-out -6s infinite alternate-reverse; } .ouverture::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--filet) 1px, transparent 1px), linear-gradient(90deg, var(--filet) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%); opacity: .7; } @keyframes derive { to { transform: translate3d(6%, 8%, 0) scale(1.12); } } .ouverture__texte { text-align: center; display: flex; flex-direction: column; align-items: center; } .ouverture__grille { display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1180px) { .ouverture { padding-block: clamp(3rem, 6vh, 5rem) clamp(4rem, 7vw, 6rem); } .ouverture__grille { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(2.5rem, 3.4vw, 4.5rem); align-items: center; min-height: calc(100vh - var(--barre) - 8rem); } .ouverture__texte { text-align: start; align-items: flex-start; } .ouverture__texte h1 { font-size: clamp(3.3rem, 1.2rem + 3.1vw, 5.4rem); } .ouverture__texte .appels { justify-content: flex-start; } .ouverture__texte .appels .bouton { padding-inline: 1.15rem; font-size: .96rem; white-space: nowrap; } } @media (min-width: 1280px) { .ouverture__texte .appels { flex-wrap: nowrap; } .ouverture .scene-poste { margin-top: 0; } } .ouverture__texte > * { transition: opacity .9s var(--expo), translate .9s var(--expo); } @starting-style { .ouverture__texte > * { opacity: 0; translate: 0 18px; } } .ouverture__texte > :nth-child(2) { transition-delay: .08s; } .ouverture__texte > :nth-child(3) { transition-delay: .16s; } .ouverture__texte > :nth-child(4) { transition-delay: .24s; } .pastille { display: inline-block; padding: .45rem .95rem; border-radius: 999px; font: 500 .78rem/1.3 var(--mono); letter-spacing: .02em; color: var(--fg-doux); background: var(--voile); border: 1px solid var(--filet-fort); backdrop-filter: blur(8px); } .pastille__point { display: inline-block; margin-inline-end: .6rem; vertical-align: .08em; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgb(34 211 238 / .6); animation: pouls 2.4s ease-out infinite; } @keyframes pouls { 0% { box-shadow: 0 0 0 0 rgb(34 211 238 / .55); } 70%, 100% { box-shadow: 0 0 0 9px rgb(34 211 238 / 0); } } h1 { margin-top: 1.6rem; font-size: clamp(2.6rem, 1.2rem + 5.6vw, 6.2rem); font-weight: 600; line-height: .98; letter-spacing: -.045em; max-width: 16ch; background: linear-gradient(180deg, var(--fg-fort) 30%, light-dark(#4a4f63, #b9b3d9)); -webkit-background-clip: text; background-clip: text; color: transparent; } .h1__or { display: block; background: linear-gradient(100deg, light-dark(#a86a00, var(--or-clair)), light-dark(#c98100, var(--or)) 40%, light-dark(#8a5a00, var(--or-fonce))); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; } .chapo { margin-top: 1.6rem; max-width: 44rem; font-size: clamp(1.05rem, .95rem + .45vw, 1.28rem); line-height: 1.6; color: var(--fg-doux); } .appels { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2.2rem; } @media (max-width: 479px) { .appels .bouton { width: 100%; } } /* ------------------------------------------ Le poste de pilotage reconstruit */ .scene-poste { position: relative; margin-top: clamp(3rem, 6vw, 4.5rem); perspective: 2000px; } .scene-poste::before, .scene-poste::after { content: ""; position: absolute; z-index: -1; pointer-events: none; } .scene-poste::before { inset: -10% -8% -14%; filter: blur(70px); background: radial-gradient(50% 55% at 28% 42%, light-dark(rgb(116 81 255 / .34), rgb(116 81 255 / .6)), transparent 72%), radial-gradient(45% 50% at 72% 66%, light-dark(rgb(34 211 238 / .26), rgb(34 211 238 / .38)), transparent 72%); animation: respire 9s ease-in-out infinite alternate; } /* Le halo or naît derrière la colonne « À vous », au rythme de la carte. */ .scene-poste::after { width: 46%; aspect-ratio: 1; right: -10%; top: -14%; border-radius: 50%; filter: blur(50px); background: radial-gradient(closest-side, light-dark(rgb(255 180 84 / .5), rgb(255 200 97 / .55)), transparent); opacity: .35; } @keyframes respire { from { opacity: .8; scale: .96; } to { opacity: 1; scale: 1.04; } } .poste { --r: 18px; container-type: inline-size; position: relative; border-radius: var(--r); background: var(--surface); box-shadow: var(--ombre-haute); overflow: hidden; transform-origin: 50% 0; font-size: 14px; line-height: 1.45; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .poste { animation: redresse linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } @keyframes redresse { from { transform: rotateX(22deg) scale(.92) translateY(-2%); } to { transform: none; } } @media (min-width: 1180px) { .poste { animation: penche 1.6s var(--expo) .2s backwards; } .scene-poste:hover .poste { transform: none; } @keyframes penche { from { opacity: 0; transform: rotateY(-22deg) rotateX(10deg) translateX(40px) scale(.94); } to { opacity: 1; transform: rotateY(-9deg) rotateX(4deg); } } .poste { transform: rotateY(-9deg) rotateX(4deg); transition: transform .9s var(--expo); } } } } .poste__chrome { display: flex; align-items: center; gap: 7px; height: 38px; padding-inline: 16px; border-bottom: 1px solid var(--filet); background: var(--surface-2); } .poste__chrome i { width: 11px; height: 11px; border-radius: 50%; background: var(--decor); opacity: .8; } .poste__chrome span { margin-inline: auto; font: 500 12px/1 var(--mono); color: var(--fg-pale); translate: -24px 0; } .poste__corps { display: grid; grid-template-columns: 196px minmax(0, 1fr) 270px; min-height: 470px; } .poste__menu { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; border-inline-end: 1px solid var(--filet); background: linear-gradient(180deg, var(--froid-voile), transparent 60%); } .poste__marque { display: flex; align-items: center; gap: 8px; padding: 2px 8px 16px; font: 700 15px/1 var(--titre); color: var(--fg-fort); } .poste__marque .marque__signe { width: 26px; height: 26px; } .poste__menu > span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--fg-doux); font-weight: 500; font-size: 13.5px; } .poste__menu .icone { width: 17px; height: 17px; color: var(--fg-pale); } .poste__menu .est-actif { color: var(--fg-fort); background: color-mix(in oklab, var(--violet) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--violet) 40%, transparent) inset; } .poste__menu .est-actif .icone { color: var(--marque); } .poste__menu-titre { padding: 4px 10px 6px; font: 600 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-pale); } /* Le nombre des décisions, comme sur le menu du produit. */ .poste__menu em { margin-inline-start: auto; min-width: 20px; height: 20px; display: grid; place-items: center; padding-inline: 6px; font: 600 11px/1 var(--mono); font-style: normal; border-radius: 999px; background: color-mix(in oklab, var(--violet) 20%, transparent); color: var(--marque); } .poste__menu em.est-vide { visibility: hidden; } .poste__principal { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; min-width: 0; } .poste__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .poste__tete > div { display: flex; flex-direction: column; gap: 2px; } .poste__tete .sur-titre { font: 600 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--marque); } .poste__titre { font: 700 26px/1.2 var(--titre); color: var(--fg-fort); letter-spacing: -.02em; } .poste__resume { color: var(--fg-pale); font-size: 13px; } .direct { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 500 11.5px/1.2 var(--mono); color: var(--vif); background: color-mix(in oklab, var(--cyan) 10%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--cyan) 30%, transparent) inset; white-space: nowrap; } .direct i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: pouls 2s ease-out infinite; } .poste__grille { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .agent { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--filet); isolation: isolate; } .agent::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1; background: conic-gradient(from var(--angle), transparent 0 70%, var(--cyan) 80%, var(--violet) 90%, transparent 100%); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; animation: tourne 5s linear infinite; opacity: .9; } .agent:nth-child(2)::before { animation-duration: 6.5s; animation-delay: -2s; } .agent:nth-child(3)::before { animation-duration: 5.8s; animation-delay: -4s; } .agent:nth-child(4)::before { animation-duration: 4.6s; animation-delay: -1s; } @keyframes tourne { to { --angle: 360deg; } } .agent__robot { position: relative; grid-row: 1 / span 2; width: 46px; height: 46px; } .agent .robot { width: 100%; height: 100%; } /* Ses tâches sur l'épaule, comme sur l'écran Équipe. */ .agent__taches { position: absolute; inset-block-end: -4px; inset-inline-start: -10px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 5px; border-radius: 7px; font: 700 10px/1 var(--mono); color: #3a2a00; background: #ffd84d; box-shadow: 0 2px 6px -2px rgb(0 0 0 / .4); rotate: -8deg; } .agent__taches .icone { width: 10px; height: 10px; stroke-width: 2.6; } .agent__texte { display: contents; } .agent__tache, .agent__barre { grid-column: 1 / -1; } .agent__tache { margin-top: 8px; } .agent__texte b { color: var(--fg-fort); font-weight: 600; font-size: 14px; } .agent__etat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vif); } .agent__etat i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: pouls 2s ease-out infinite; } .agent__tache { color: var(--fg-doux); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; transition: opacity .35s; } .agent__tache::first-letter { text-transform: uppercase; } .agent__tache.change { opacity: 0; } .agent__barre { position: relative; height: 3px; border-radius: 3px; background: var(--filet); overflow: hidden; margin-top: 3px; } .agent__barre i { position: absolute; inset: 0; width: 62%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); animation: avance 6s var(--expo) infinite; } .agent:nth-child(1) .agent__barre i { animation-duration: 5.2s; } .agent:nth-child(2) .agent__barre i { animation-duration: 7.4s; animation-delay: -3s; } .agent:nth-child(3) .agent__barre i { animation-duration: 6.1s; animation-delay: -1.5s; } .agent:nth-child(4) .agent__barre i { animation-duration: 4.6s; animation-delay: -.5s; } @keyframes avance { from { width: 4%; } 85% { width: 100%; opacity: 1; } to { width: 100%; opacity: 0; } } .agent.est-pret { border-color: var(--or-filet); } .agent.est-pret .agent__etat { color: var(--chaud); } .agent.est-pret .agent__etat i { background: var(--or); } .poste__fil { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--filet); font-size: 12.5px; } .poste__fil-titre { font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-pale); } .poste__fil-defile { position: relative; height: 20px; overflow: hidden; flex: 1; } .poste__fil-defile p { height: 20px; display: flex; gap: 6px; align-items: center; white-space: nowrap; color: var(--fg-doux); animation: fil 12s var(--expo) infinite; } .poste__fil-defile b { color: var(--fg-fort); font-weight: 600; } .poste__fil-defile time { margin-inline-start: auto; color: var(--fg-pale); font-family: var(--mono); font-size: 11px; padding-inline-start: 8px; } @keyframes fil { 0%, 22% { transform: translateY(0); } 25%, 47% { transform: translateY(-100%); } 50%, 72% { transform: translateY(-200%); } 75%, 97% { transform: translateY(-300%); } 100% { transform: translateY(-400%); } } .poste__cote { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; border-inline-start: 1px solid var(--filet); background: linear-gradient(180deg, var(--or-voile), transparent 55%); } .avous { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 236px; } .avous__tete { display: flex; align-items: center; justify-content: space-between; font: 600 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--chaud); } .avous__tete em { font-style: normal; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: var(--or); color: var(--sur-or); letter-spacing: 0; } .avous__vide { position: absolute; top: 104px; left: 0; right: 0; text-align: center; color: var(--fg-pale); font-size: 12.5px; opacity: 0; } .carte-or { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 14px 14px 12px; border-radius: 14px; background: linear-gradient(160deg, light-dark(#fff6e2, rgb(255 200 97 / .13)), light-dark(#fffaf0, rgb(255 200 97 / .04))); border: 1px solid var(--or-filet); box-shadow: 0 12px 30px -14px rgb(255 180 84 / .55), 0 1px 0 rgb(255 255 255 / .08) inset; } .carte-or__sur { font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--chaud); } .carte-or__titre { color: var(--fg-fort); font-weight: 600; font-size: 14.5px; line-height: 1.3; } .carte-or__de { color: var(--fg-pale); font-size: 12px; } .pointeur { position: absolute; width: 22px; height: 22px; inset-inline-end: 14px; bottom: -2px; fill: light-dark(#0b0c0f, #fff); stroke: light-dark(#fff, #0b0c0f); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 3px 5px rgb(0 0 0 / .35)); opacity: 0; pointer-events: none; } .fait { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--filet); } .fait__titre { font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-pale); } .fait__nombre { font: 600 40px/1 var(--titre); color: var(--fg-fort); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .fait__nombre.bond { animation: bond .7s var(--expo); } @keyframes bond { 0% { transform: translateY(8px); opacity: .2; color: var(--chaud); } 60% { color: var(--chaud); } 100% { transform: none; opacity: 1; } } .fait__barres { display: flex; align-items: flex-end; gap: 4px; height: 28px; } .fait__barres i { flex: 1; border-radius: 3px; background: linear-gradient(180deg, var(--cyan), var(--violet)); opacity: .75; } .fait__barres i:nth-child(1) { height: 30%; } .fait__barres i:nth-child(2) { height: 55%; } .fait__barres i:nth-child(3) { height: 40%; } .fait__barres i:nth-child(4) { height: 70%; } .fait__barres i:nth-child(5) { height: 50%; } .fait__barres i:nth-child(6) { height: 85%; } .fait__barres i:nth-child(7) { height: 100%; background: linear-gradient(180deg, var(--or-clair), var(--or-fonce)); opacity: 1; } /* Ce qui arrive à un agent : une tâche du chef de projet, une demande, un lancement. */ .recu { position: absolute; top: -9px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font: 600 10.5px/1.2 var(--mono); white-space: nowrap; color: var(--marque); background: var(--surface); box-shadow: 0 0 0 1px color-mix(in oklab, var(--violet) 45%, transparent) inset, 0 4px 12px -4px rgb(116 81 255 / .5); } .recu .icone { width: 12px; height: 12px; } .recu--depot { color: var(--rose-texte); box-shadow: 0 0 0 1px color-mix(in oklab, var(--rose) 50%, transparent) inset, 0 4px 12px -4px rgb(217 70 143 / .5); } .recu--lance { color: var(--vif); box-shadow: 0 0 0 1px color-mix(in oklab, var(--cyan) 50%, transparent) inset, 0 4px 12px -4px rgb(34 211 238 / .5); } .recu--avant { opacity: 0; } /* Les gestes entre agents, d'un centre de carte à l'autre (grille 2 x 2). */ .envoi, .depot, .lancement { position: absolute; z-index: 4; pointer-events: none; opacity: 0; } .envoi { left: 25%; top: 25%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--violet-clair); box-shadow: 0 0 0 4px rgb(116 81 255 / .22), 0 0 16px 2px rgb(139 104 255 / .9); } .depot { left: 75%; top: 25%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--rose); box-shadow: 0 0 0 4px rgb(217 70 143 / .2), 0 0 18px rgb(217 70 143 / .8); } .depot .icone { width: 14px; height: 14px; } .lancement { left: 37%; top: 75%; width: 26%; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, var(--bleu), var(--cyan)); box-shadow: 0 0 12px rgb(34 211 238 / .8); transform-origin: 0 50%; } .lancement::after { content: ""; position: absolute; right: -2px; top: 50%; width: 8px; height: 8px; translate: 0 -50%; rotate: 45deg; border: solid var(--cyan); border-width: 2px 2px 0 0; } .lancement span { position: absolute; left: 50%; bottom: 7px; translate: -50% 0; padding: 2px 8px; border-radius: 999px; font: 600 10.5px/1.3 var(--mono); color: var(--vif); background: var(--surface); box-shadow: 0 0 0 1px color-mix(in oklab, var(--cyan) 45%, transparent) inset; } /* La décision qui vous attend : trois options, celle que recommande le chef de projet. */ .options { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; } .option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--fg); background: var(--surface-3); box-shadow: 0 0 0 1px var(--filet) inset; white-space: nowrap; } .option em { font: 500 9.5px/1 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--chaud); } .option--reco { display: grid; grid-template-columns: minmax(0, 1fr) auto; box-shadow: 0 0 0 1px var(--or-filet) inset; } .option__choix::after { content: " ✓"; opacity: 0; } .option--reco.est-choisi, .option--reco.est-choisi em { color: var(--sur-or); } .option--reco.est-choisi { background: linear-gradient(180deg, var(--or-clair), var(--or)); box-shadow: 0 4px 14px -4px rgb(255 180 84 / .8); } .option--reco .pointeur { inset-inline-end: 18px; bottom: -14px; } /* La boucle (cycle de 14 s) : le chef de projet envoie trois tâches, la secrétaire dépose une demande chez le commercial, le commercial lance le développeur, puis une décision vous attend. */ @media (prefers-reduced-motion: no-preference) { .envoi--1 { animation: envoi-1 var(--cycle) ease-in-out infinite; } .envoi--2 { animation: envoi-2 var(--cycle) ease-in-out infinite; } .envoi--3 { animation: envoi-3 var(--cycle) ease-in-out infinite; } .depot { animation: depot var(--cycle) ease-in-out infinite; } .lancement { animation: lancement var(--cycle) var(--expo) infinite; } .recu--chef { animation: recu-chef var(--cycle) var(--expo) infinite; } .agent--secretaire .recu--tache { animation: recu-secretaire var(--cycle) var(--expo) infinite; } .agent--commercial .recu--avant { animation: recu-commercial var(--cycle) var(--expo) infinite; } .recu--depot { animation: recu-depot var(--cycle) var(--expo) infinite; } .agent--dev .recu--avant { animation: recu-dev var(--cycle) var(--expo) infinite; } .recu--lance { animation: recu-lance var(--cycle) var(--expo) infinite; } [data-poste] .carte-or { animation: carte var(--cycle) var(--expo) infinite; } [data-poste] .pointeur { animation: pointe var(--cycle) cubic-bezier(.45, 0, .2, 1) infinite; } [data-poste] .option__choix::after { animation: geste-apres var(--cycle) steps(1) infinite; } [data-poste] .option--reco { animation: choisit var(--cycle) ease-out infinite; } [data-poste] .option--reco em { animation: choisit-em var(--cycle) steps(1) infinite; } [data-poste] .avous__vide { animation: vide var(--cycle) ease infinite; } .scene-poste::after { animation: halo-or var(--cycle) ease-in-out infinite; } } @keyframes envoi-1 { 0%, 4% { left: 25%; top: 25%; opacity: 0; scale: .4; } 6% { opacity: 1; scale: 1; } 16% { left: 75%; top: 25%; opacity: 1; scale: 1; } 19%, 100% { left: 75%; top: 25%; opacity: 0; scale: 2; } } @keyframes envoi-2 { 0%, 6% { left: 25%; top: 25%; opacity: 0; scale: .4; } 8% { opacity: 1; scale: 1; } 18% { left: 25%; top: 75%; opacity: 1; scale: 1; } 21%, 100% { left: 25%; top: 75%; opacity: 0; scale: 2; } } @keyframes envoi-3 { 0%, 8% { left: 25%; top: 25%; opacity: 0; scale: .4; } 10% { opacity: 1; scale: 1; } 20% { left: 75%; top: 75%; opacity: 1; scale: 1; } 23%, 100% { left: 75%; top: 75%; opacity: 0; scale: 2; } } @keyframes depot { 0%, 26% { left: 75%; top: 25%; opacity: 0; scale: .5; } 28% { opacity: 1; scale: 1; } 37% { left: 25%; top: 75%; opacity: 1; scale: 1; } 40%, 100% { left: 25%; top: 75%; opacity: 0; scale: 1.6; } } @keyframes lancement { 0%, 42% { opacity: 0; scale: 0 1; } 44% { opacity: 1; } 50%, 58% { opacity: 1; scale: 1 1; } 62%, 100% { opacity: 0; scale: 1 1; } } @keyframes recu-chef { 0%, 3% { opacity: 0; translate: 0 6px; } 6%, 92% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; } } @keyframes recu-secretaire { 0%, 16% { opacity: 0; translate: 0 6px; } 19%, 92% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; } } @keyframes recu-commercial { 0%, 18% { opacity: 0; translate: 0 6px; } 21%, 36% { opacity: 1; translate: 0 0; } 38%, 100% { opacity: 0; } } @keyframes recu-depot { 0%, 37% { opacity: 0; translate: 0 6px; } 40%, 92% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; } } @keyframes recu-dev { 0%, 20% { opacity: 0; translate: 0 6px; } 23%, 47% { opacity: 1; translate: 0 0; } 49%, 100% { opacity: 0; } } @keyframes recu-lance { 0%, 49% { opacity: 0; translate: 0 6px; } 52%, 92% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; } } @keyframes halo-or { 0%, 52% { opacity: .2; scale: .8; } 60% { opacity: 1; scale: 1.08; } 70%, 74% { opacity: .75; scale: 1; } 77% { opacity: 1; scale: 1.12; } 90%, 100% { opacity: .2; scale: .8; } } @keyframes carte { 0%, 53% { opacity: 0; transform: translateY(18px) scale(.96); } 59%, 84% { opacity: 1; transform: none; } 87% { opacity: 1; transform: scale(.98); } 93%, 100% { opacity: 0; transform: translateY(70px) scale(.8); } } @keyframes pointe { 0%, 63% { opacity: 0; transform: translate(60px, 60px); } 67% { opacity: 1; transform: translate(40px, 40px); } 74% { opacity: 1; transform: translate(0, 0) scale(1); } 76% { transform: translate(0, 0) scale(.82); } 78% { transform: translate(0, 0) scale(1); } 84% { opacity: 1; transform: translate(12px, 20px); } 88%, 100% { opacity: 0; transform: translate(30px, 50px); } } @keyframes geste-apres { 0% { opacity: 0; } 76% { opacity: 1; } } @keyframes choisit-em { 0% { color: var(--chaud); } 76% { color: var(--sur-or); } } @keyframes choisit { 0%, 75% { background: var(--surface-3); color: var(--fg); scale: 1; } 76% { scale: .95; } 78%, 100% { background: var(--or); color: var(--sur-or); scale: 1; box-shadow: 0 4px 14px -4px rgb(255 180 84 / .8); } } @keyframes vide { 0%, 52% { opacity: 1; } 56%, 90% { opacity: 0; } 95%, 100% { opacity: 1; } } @container (max-width: 1000px) { .poste__corps { grid-template-columns: minmax(0, 1fr) 232px; } /* Le menu passe en barre au-dessus de la page, comme le menu du produit sur un écran étroit. */ .poste__menu { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 8px 12px; border-inline-end: 0; border-bottom: 1px solid var(--filet); background: var(--froid-voile); } .poste__marque, .poste__menu > .poste__menu-titre { display: none; } .poste__menu > span { padding: 6px 10px; font-size: 12.5px; gap: 7px; } .poste__menu .icone { width: 15px; height: 15px; } .poste__menu em { margin-inline-start: 2px; } .poste__principal { padding-inline: 18px; } .poste__cote { padding-inline: 16px; } } @container (max-width: 520px) { .poste__menu > span:not(.est-actif) { font-size: 0; gap: 0; } .poste__menu > span:not(.est-actif) em { font-size: 11px; margin-inline-start: 5px; } } @container (max-width: 640px) { .poste__corps { grid-template-columns: minmax(0, 1fr); min-height: 0; } .poste__principal { padding: 16px; gap: 12px; } .poste__cote { border-inline-start: 0; border-top: 1px solid var(--filet); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: start; } .avous { min-height: 176px; } .avous__vide { top: 80px; } .fait { margin-top: 0; } .fait__nombre { font-size: 32px; } .fait__barres { height: 20px; } .poste__fil { display: none; } .poste__titre { font-size: 22px; } .poste__chrome span { translate: 0 0; } } @container (max-width: 480px) { .poste__grille { gap: 8px; } .agent { padding: 10px; grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; } .agent__robot { width: 36px; height: 36px; } .agent__texte b { font-size: 13px; } .agent__tache { font-size: 12px; } .poste__cote { grid-template-columns: minmax(0, 1fr); } .fait { flex-direction: row; align-items: center; justify-content: space-between; } .fait__barres { width: 90px; } .poste__resume { font-size: 12px; } } /* ------------------------------------------------------------------- Robot */ .robot { --casquette: var(--logo-violet); overflow: visible; } .robot--cyan { --casquette: var(--logo-cyan); } .robot--rose { --casquette: var(--logo-rose); } .robot--bleu { --casquette: var(--logo-bleu); } .robot__badge { fill: var(--casquette); } .robot__casquette { fill: var(--casquette); } .robot__oeil { fill: #6ee787; } .robot__ferme { fill: none; stroke: #9ca3af; stroke-width: 30; stroke-linecap: round; display: none; } .robot--repos .robot__oeil { display: none; } .robot--repos .robot__ferme { display: inline; } .robot--travaille .robot__yeux { transform-box: fill-box; transform-origin: center; animation: cligne 5s infinite; filter: drop-shadow(0 0 18px #6ee787); } @keyframes cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } } /* ---------------------------------------------------------------- Parcours */ .parcours { position: relative; --gouttiere: max(1.25rem, calc((100% - 1200px) / 2 - 3.5rem)); } .parcours__ligne, .repere { display: none; } @media (min-width: 1360px) { .parcours__ligne { display: block; position: absolute; inset-inline-start: calc(var(--gouttiere) + 5px); top: 0; bottom: 9rem; width: 2px; border-radius: 2px; background: var(--filet); pointer-events: none; } .parcours__ligne::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--violet), var(--cyan)); transform-origin: 50% 0; transform: scaleY(var(--dessin, 1)); box-shadow: 0 0 12px rgb(116 81 255 / .6); } /* Chaque section vue se coche sur la ligne ; la dernière coche, en or, est le « oui » de l'inscription. */ .repere { display: block; position: absolute; inset-inline-start: calc(var(--gouttiere) - 7px); width: 26px; height: 26px; margin-top: .3rem; z-index: 1; padding: 2px; border-radius: 8px; background: var(--fond); color: var(--filet-fort); transition: color .4s, filter .4s, scale .4s var(--expo); } .repere.est-vu { color: var(--cyan); } .repere.est-vu .coche__halo { opacity: .2; } .repere--final { width: 34px; height: 34px; inset-inline-start: calc(var(--gouttiere) - 11px); margin-top: 7rem; } .parcours:has(#email:valid:not(:placeholder-shown)) .repere--final, .parcours:has(.est-inscrit) .repere--final { color: var(--chaud); scale: 1.12; } .parcours:has(#email:valid:not(:placeholder-shown)) .repere--final .coche__halo, .parcours:has(.est-inscrit) .repere--final .coche__halo { opacity: .2; } } @supports (animation-timeline: view()) { @media (min-width: 1360px) and (prefers-reduced-motion: no-preference) { .parcours__ligne::after { animation: dessine linear both; animation-timeline: --parcours; animation-range: entry 40% exit 0%; } .parcours { view-timeline: --parcours block; } @keyframes dessine { from { transform: scaleY(0); } to { transform: scaleY(1); } } } } /* -------------------------------------------------------- Têtes de section */ section { position: relative; } .section-tete { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-tete--gauche { align-items: flex-start; text-align: start; } h2 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4rem); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; } .section-tete__sous { max-width: 40rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--fg-doux); } h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; } .journee, .equipe, .autonomie, .rouages, .projets, .origine, .questions, .inscription { padding-block: clamp(3.25rem, 6vw, 5.5rem); } /* Apparition au défilement (script) : sans script ni mouvement, tout est là. */ @media (prefers-reduced-motion: no-preference) { .js .apparait { opacity: 0; translate: 0 28px; transition: opacity .9s var(--expo), translate .9s var(--expo); } .js .apparait.est-vu { opacity: 1; translate: 0 0; } .js :is(.roles, .tuiles, .chemin) > .apparait:nth-child(2) { transition-delay: .07s; } .js :is(.roles, .tuiles, .chemin) > .apparait:nth-child(3) { transition-delay: .14s; } .js :is(.roles, .tuiles, .chemin) > .apparait:nth-child(4) { transition-delay: .21s; } .js :is(.roles, .tuiles) > .apparait:nth-child(5) { transition-delay: .28s; } } /* ---------------------------------------------------- Une journée avec Lastnod */ .journee { background: linear-gradient(180deg, transparent, var(--fond-2) 12%, var(--fond-2) 88%, transparent); } .journee__corps { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .journee__etapes { counter-reset: etape; } .etape { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding-block: 2rem; } .etape:first-child { min-height: 56vh; justify-content: flex-start; padding-top: 12vh; } .etape:last-child { min-height: min(560px, calc(100vh - var(--barre) - 3rem)); padding-block: 0; } .etape h3 { text-wrap: pretty; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem); line-height: 1.12; letter-spacing: -.03em; } .etape__heure { word-spacing: -.3em; font-family: var(--mono); font-weight: 500; color: var(--vif); letter-spacing: -.04em; } .etape p { font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); color: var(--fg-doux); max-width: 34rem; } .js .etape { transition: opacity .5s; } .js .etape:not(.est-active) { opacity: .32; } .etape.est-active .etape__heure { text-shadow: 0 0 24px light-dark(transparent, rgb(34 211 238 / .45)); } .journee__ecran { position: sticky; top: calc(var(--barre) + max(1.5rem, (100vh - var(--barre) - 560px) / 2)); height: min(560px, calc(100vh - var(--barre) - 3rem)); } .ecran { position: relative; height: 100%; overflow: hidden; border-radius: 24px; background: var(--surface); box-shadow: var(--ombre-haute); font-size: 14px; line-height: 1.45; --ciel-1: rgb(255 140 160 / .26); --ciel-2: rgb(116 81 255 / .30); transition: --ciel-1 1.2s ease, --ciel-2 1.2s ease; } .journee[data-etape="2"] .ecran { --ciel-1: rgb(255 200 97 / .26); --ciel-2: rgb(116 81 255 / .16); } .journee[data-etape="3"] .ecran { --ciel-1: rgb(255 200 97 / .22); --ciel-2: rgb(34 211 238 / .14); } .journee[data-etape="4"] .ecran { --ciel-1: rgb(34 211 238 / .24); --ciel-2: rgb(116 81 255 / .12); } .journee[data-etape="5"] .ecran { --ciel-1: rgb(59 108 246 / .24); --ciel-2: rgb(34 211 238 / .16); } .journee[data-etape="6"] .ecran { --ciel-1: rgb(52 31 131 / .55); --ciel-2: rgb(116 81 255 / .32); } .ecran__ciel { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 60% at 85% 0%, var(--ciel-1), transparent 70%), radial-gradient(70% 50% at 0% 100%, var(--ciel-2), transparent 70%); } .ecran__barre { position: relative; display: flex; align-items: center; gap: 14px; padding: 22px 26px 0; } .ecran__jour { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-pale); } .ecran__horloge { word-spacing: -.3em; margin-inline-start: auto; font: 500 clamp(30px, 3.4vw, 46px)/1 var(--mono); letter-spacing: -.06em; color: var(--fg-fort); font-variant-numeric: tabular-nums; } .ecran__horloge.tourne { animation: horloge .6s var(--expo); } @keyframes horloge { from { opacity: 0; transform: translateY(40%); filter: blur(4px); } } .ecran__points { display: flex; gap: 5px; order: -1; } .ecran__points i { width: 7px; height: 7px; border-radius: 50%; background: var(--filet-fort); transition: background .4s, box-shadow .4s; } .journee[data-etape="1"] .ecran__points i:nth-child(-n+1), .journee[data-etape="2"] .ecran__points i:nth-child(-n+2), .journee[data-etape="3"] .ecran__points i:nth-child(-n+3), .journee[data-etape="4"] .ecran__points i:nth-child(-n+4), .journee[data-etape="5"] .ecran__points i:nth-child(-n+5), .journee[data-etape="6"] .ecran__points i:nth-child(-n+6) { background: var(--cyan); box-shadow: 0 0 8px rgb(34 211 238 / .6); } /* Une scène à la fois : celle qui part s'efface sur place, la suivante n'entre qu'après. */ .scene { position: absolute; inset: 88px 26px 26px; display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; translate: 0 14px; transition: opacity .22s ease-in, translate 0s .22s, visibility 0s .22s; } .journee[data-etape="1"] .scene--1, .journee[data-etape="2"] .scene--2, .journee[data-etape="3"] .scene--3, .journee[data-etape="4"] .scene--4, .journee[data-etape="5"] .scene--5, .journee[data-etape="6"] .scene--6 { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .5s .26s, translate .8s .26s var(--expo), visibility 0s .26s; } /* Ce qui entre dans une scène entre en cascade (enfants directs et listes marquées). */ .scene > *, .cascade > * { transition: opacity .6s var(--expo), translate .6s var(--expo); } .journee:not([data-etape="1"]) .scene--1 :is(.scene > *, .cascade > *), .journee:not([data-etape="2"]) .scene--2 :is(.scene > *, .cascade > *), .journee:not([data-etape="3"]) .scene--3 :is(.scene > *, .cascade > *), .journee:not([data-etape="4"]) .scene--4 :is(.scene > *, .cascade > *), .journee:not([data-etape="5"]) .scene--5 :is(.scene > *, .cascade > *), .journee:not([data-etape="6"]) .scene--6 :is(.scene > *, .cascade > *) { opacity: 0; translate: 0 12px; transition-duration: 0s; transition-delay: .22s; } .scene > :nth-child(1), .cascade > :nth-child(1) { transition-delay: .26s; } .scene > :nth-child(2), .cascade > :nth-child(2) { transition-delay: .42s; } .scene > :nth-child(3), .cascade > :nth-child(3) { transition-delay: .58s; } .scene > :nth-child(4), .cascade > :nth-child(4) { transition-delay: .74s; } .cascade > :nth-child(5) { transition-delay: .9s; } .panneau { padding: 16px 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--filet); } .panneau__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .panneau__tete b { display: inline-flex; align-items: center; gap: 8px; font: 600 17px/1.2 var(--titre); color: var(--fg-fort); } .panneau__tete b .icone { color: var(--rose-texte); } .puce { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 500 11px/1.3 var(--mono); font-style: normal; color: var(--fg-doux); background: var(--surface-3); box-shadow: 0 0 0 1px var(--filet) inset; white-space: nowrap; } .puce .icone { width: 13px; height: 13px; } .puce--vif { color: var(--vif); background: color-mix(in oklab, var(--cyan) 10%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--cyan) 28%, transparent) inset; } .puce--marque { color: var(--marque); background: color-mix(in oklab, var(--violet) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--violet) 32%, transparent) inset; } .puce--baisse { color: var(--rose-texte); background: color-mix(in oklab, var(--rose) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--rose) 32%, transparent) inset; } .puce--or { color: var(--sur-or); background: var(--or); box-shadow: none; font-weight: 600; } /* 6 h */ .qui-lance { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg-doux); } .qui-lance .robot { width: 36px; height: 36px; flex: none; } .qui-lance b { color: var(--fg-fort); } .qui-lance .puce { margin-inline-start: auto; } .compte-mails { padding: 4px 11px; border-radius: 999px; font: 600 12.5px/1.2 var(--mono); color: #fff; background: var(--rose); box-shadow: 0 6px 16px -6px rgb(217 70 143 / .8); } .tri li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--filet); } .tri b { font: 600 22px/1 var(--titre); color: var(--fg-fort); letter-spacing: -.03em; } .tri span { color: var(--fg-doux); } .tri__boites { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1 var(--mono); font-style: normal; color: var(--fg-doux); } .robot-point { width: 9px; height: 9px; margin-inline-start: 5px; border-radius: 50%; background: var(--logo-violet); } .robot-point--bleu { background: var(--logo-bleu); } .robot-point--cyan { background: var(--logo-cyan); } .robot-point--rose { background: var(--logo-rose); } .agenda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .agenda li { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--filet); border-inline-start: 3px solid var(--rose); font-size: 12.5px; color: var(--fg-fort); font-weight: 500; } .agenda time { font: 500 11px/1 var(--mono); color: var(--rose-texte); } .boites-recues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .boites-recues li { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--filet); font-size: 12px; color: var(--fg-doux); } .boites-recues .robot { width: 30px; height: 30px; flex: none; } .boites-recues b { display: block; color: var(--fg-fort); font-weight: 600; } /* 7 h 30 */ .courbe { padding-block: 14px; } .barres-semaines { display: flex; flex-direction: column; gap: 6px; } .barres-semaines span { display: grid; grid-template-columns: minmax(0, 1fr) 26px; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); color: var(--fg-doux); text-align: end; } .barres-semaines i { height: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--violet), var(--cyan)); transform-origin: 0 50%; transition: scale 1s var(--expo) .5s; } .barres-semaines .b-13 { width: 72%; } .barres-semaines .b-9 { width: 50%; background: linear-gradient(90deg, var(--violet), var(--rose)); } .journee:not([data-etape="2"]) .barres-semaines i { scale: 0 1; transition: none; } .decoupe { display: flex; flex-direction: column; gap: 8px; } .decoupe__qui { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--marque); font-weight: 600; } .decoupe__qui .robot { width: 30px; height: 30px; } .pile-lignes { display: flex; flex-direction: column; gap: 6px; } .pile-lignes li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--filet); color: var(--fg-fort); font-size: 13.5px; } .pile-lignes li i { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font: 600 11px/1 var(--mono); font-style: normal; color: var(--marque); background: color-mix(in oklab, var(--violet) 14%, transparent); } .pile-lignes .puce { margin-inline-start: auto; } .idees { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 14px; background: var(--or-voile); border: 1px solid var(--or-filet); } .idees__titre { display: inline-flex; flex-basis: 100%; align-items: center; gap: 6px; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--chaud); } .idee { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--sur-or); background: var(--or); } /* 8 h 15 */ .decision { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(160deg, light-dark(#fff6e2, rgb(255 200 97 / .13)), light-dark(#fffaf0, rgb(255 200 97 / .04))); border: 1px solid var(--or-filet); box-shadow: 0 12px 30px -14px rgb(255 180 84 / .55); } .decision__tete { display: flex; flex-direction: column; gap: 4px; } .decision__tete b { font: 600 17px/1.25 var(--titre); color: var(--fg-fort); } .decision__chiffre { font: 500 12px/1.3 var(--mono); color: var(--fg-doux); } .options--ligne { flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 0; } .options--ligne .option { padding: 6px 12px; font-size: 12.5px; } .options--ligne .option--reco { display: inline-flex; } .decision__avis { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-doux); } .decision__avis .robot { width: 24px; height: 24px; flex: none; } .confier { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 13px; color: var(--fg-doux); } .interrupteur { flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--surface-3) radial-gradient(circle at 10px 50%, var(--fg-pale) 6px, transparent 6.5px); box-shadow: 0 0 0 1px var(--filet-fort) inset; } .chrono { white-space: nowrap; margin-inline-start: auto; font: 500 13px/1 var(--mono); color: var(--chaud); padding: 8px 12px; border-radius: 999px; background: var(--or-voile); box-shadow: 0 0 0 1px var(--or-filet) inset; } /* 11 h */ .resultats { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; } .resultat { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--filet); color: var(--fg-doux); font-size: 13px; } .resultat__qui { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--fg-doux); } .resultat__qui .robot { width: 28px; height: 28px; } .resultat__nombre { font: 600 44px/1 var(--titre); letter-spacing: -.04em; color: var(--fg-fort); } .resultat > .puce { margin-top: auto; align-self: flex-start; } .prospects { display: grid; grid-template-columns: repeat(6, 14px); gap: 5px; } .prospects i { width: 14px; height: 14px; border-radius: 50%; background: color-mix(in oklab, var(--bleu) 40%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--bleu) 60%, transparent) inset; } .prospects .est-rdv { background: var(--cyan); box-shadow: 0 0 10px rgb(34 211 238 / .8); } /* Le chantier du développeur : la vente de cartes cadeaux, construite, testée et en ligne. */ .resultats { flex: none; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-auto-rows: auto; } .resultat--chantier { border-color: color-mix(in oklab, var(--cyan) 32%, transparent); background: radial-gradient(80% 60% at 100% 0%, color-mix(in oklab, var(--cyan) 10%, transparent), transparent 70%), var(--surface-2); } .resultat--chantier .resultat__qui .puce { margin-inline-start: auto; } .chantier__titre { font: 600 18px/1.2 var(--titre); color: var(--fg-fort); letter-spacing: -.02em; } .carte-cadeau { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #5f34f5, #0a90b4); box-shadow: 0 12px 24px -12px rgb(34 150 220 / .7); overflow: hidden; } .carte-cadeau::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .28) 50%, transparent 65%); translate: -100% 0; transition: translate 1.4s ease .9s; } .journee[data-etape="4"] .carte-cadeau::after { translate: 100% 0; } .carte-cadeau__nom { display: flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; opacity: .9; } .carte-cadeau__nom .marque__signe { width: 14px; height: 14px; } .carte-cadeau b { font: 600 16px/1.1 var(--titre); } .carte-cadeau__code { font: 500 10.5px/1 var(--mono); opacity: .8; } .chantier__liste { display: flex; flex-direction: column; gap: 5px; } .chantier__liste li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg); } .chantier__liste .icone { width: 15px; height: 15px; color: var(--vif); } .chantier__liste li::after { content: "✓"; margin-inline-start: auto; color: var(--vif); font-weight: 600; } .chantier__tests { display: flex; align-items: center; gap: 10px; margin-top: 6px; font: 500 11.5px/1 var(--mono); color: var(--vif); } .chantier__tests b { font-weight: 600; white-space: nowrap; } .chantier__jauge { flex: 1; height: 7px; border-radius: 4px; background: var(--filet); overflow: hidden; } .chantier__jauge i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); transform-origin: 0 50%; transition: scale 1.2s var(--expo) .6s; } .journee:not([data-etape="4"]) .chantier__jauge i { scale: .2 1; transition: none; } /* 14 h */ .relais { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; } .relais__agent { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 10px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--filet); text-align: center; font-size: 12px; color: var(--fg-doux); } .relais__agent .robot { width: 46px; height: 46px; } .relais__agent b { font-size: 14px; color: var(--fg-fort); } .relais__trait { position: relative; width: clamp(56px, 8vw, 96px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--bleu), var(--cyan)); box-shadow: 0 0 12px rgb(34 211 238 / .7); } .relais__trait::after { content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; translate: 0 -50%; rotate: 45deg; border: solid var(--cyan); border-width: 2px 2px 0 0; } .relais__trait::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px var(--cyan); animation: relais 1.8s ease-in-out infinite; } @keyframes relais { from { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } } .relais__trait span { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; font: 600 11px/1 var(--mono); color: var(--vif); } .page-offre { position: relative; flex: 1; min-height: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--filet); background: var(--surface); } .page-offre__chrome { display: flex; align-items: center; gap: 6px; height: 30px; padding-inline: 12px; background: var(--surface-2); border-bottom: 1px solid var(--filet); } .page-offre__chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--decor); } .page-offre__chrome span { margin-inline-start: 8px; font: 500 11px/1 var(--mono); color: var(--fg-pale); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page-offre__corps { display: flex; flex-direction: column; gap: 8px; padding: 18px; height: calc(100% - 30px); background: radial-gradient(70% 90% at 100% 0%, color-mix(in oklab, var(--cyan) 14%, transparent), transparent 70%); } .page-offre__corps b { font: 600 21px/1.15 var(--titre); color: var(--fg-fort); letter-spacing: -.02em; } .page-offre__corps i { height: 7px; width: 78%; border-radius: 4px; background: var(--decor); } .page-offre__corps i + i { width: 56%; } .page-offre__cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; } .page-offre__cartes span { padding: 12px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--fg-fort); background: var(--surface-2); border: 1px solid var(--filet); } .fil-relais { display: flex; gap: 8px; } .fil-relais li { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--filet); font-size: 12px; color: var(--fg-doux); } .fil-relais time { font: 600 13px/1 var(--mono); word-spacing: -.2em; color: var(--vif); } .page-offre__bouton { align-self: flex-start; margin-top: 4px; padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--bleu), #0a90b4); } .page-offre__etat { position: absolute; inset-inline-end: 12px; top: 42px; } /* 19 h */ .scene--6 { align-items: center; text-align: center; } .lune { color: var(--or-clair); filter: drop-shadow(0 0 18px rgb(255 217 143 / .6)); } .lune .icone { width: 40px; height: 40px; stroke-width: 1.4; } .tournees { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: start; } .tournees li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid color-mix(in oklab, var(--violet) 30%, transparent); } .tournees time { font: 500 12px/1 var(--mono); word-spacing: -.2em; color: var(--vif); } .tournees b { font-weight: 600; font-size: 13.5px; color: var(--fg-fort); } .rangee-robots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; } .rangee-robots > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 14px; background: var(--surface-2); border: 1px solid color-mix(in oklab, var(--cyan) 30%, transparent); font-size: 11.5px; color: var(--vif); } .rangee-robots .robot { width: 44px; height: 44px; } .scene__legende { font: 500 12.5px/1.4 var(--mono); color: var(--fg-doux); } /* ------------------------------------------------------------------ Équipe */ .roles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .role { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem 1.35rem 1.6rem; border-radius: 22px; background: var(--surface); box-shadow: var(--ombre-douce); border: 1px solid var(--filet); transition: translate .35s var(--expo), box-shadow .35s, border-color .35s; } .role:hover { translate: 0 -4px; border-color: color-mix(in oklab, var(--violet) 45%, transparent); box-shadow: var(--ombre-douce), 0 20px 50px -20px rgb(116 81 255 / .55); } .role .robot { width: 72px; height: 72px; margin-bottom: .4rem; } .role p { color: var(--fg-doux); font-size: .96rem; } .role--metier { background: transparent; box-shadow: none; border: 1.5px dashed var(--filet-fort); } .role__plus { width: 72px; height: 72px; margin-bottom: .4rem; border-radius: 22px; display: grid; place-items: center; color: var(--marque); background: var(--froid-voile); } .role__plus .icone { width: 30px; height: 30px; } .note-centree { margin-top: 2rem; text-align: center; font: 500 .85rem/1.4 var(--mono); color: var(--fg-pale); } @media (max-width: 1180px) { .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .roles { grid-template-columns: minmax(0, 1fr); } .role { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 1rem; } .role .robot, .role__plus { width: 56px; height: 56px; margin: 0; } .role h3 { flex: 1; } .role p { flex-basis: 100%; } } /* ------------------------------------------------------------------- Tuiles */ .rouages { background: linear-gradient(180deg, transparent, var(--fond-2) 20%, var(--fond-2) 80%, transparent); overflow: clip; } .tuiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; } .tuile { grid-column: span 4; display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--filet); box-shadow: var(--ombre-douce); } .tuile p { color: var(--fg-doux); font-size: .95rem; } .tuile__visuel { position: relative; height: 128px; margin-bottom: .6rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--filet); display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; padding: 12px; } /* De partout : tuile large, l'ordinateur et le téléphone montrent le même écran. */ .tuile--partout { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(1.2rem, 3vw, 2.5rem); } .tuile--partout .tuile__visuel { height: 260px; margin: 0; gap: clamp(14px, 3vw, 34px); align-items: flex-end; padding: 22px 22px 0; background: radial-gradient(60% 80% at 30% 100%, var(--froid-voile), transparent 70%), var(--surface-2); } .tuile--partout h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -.03em; } .tuile--partout p { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); margin-top: .5rem; max-width: 30rem; } .appareil { position: relative; flex: none; } .appareil__ecran { display: block; overflow: hidden; background: var(--surface); } .appareil--ordinateur { width: min(340px, 58%); } .appareil--ordinateur .appareil__ecran { height: 200px; border-radius: 12px 12px 0 0; border: 6px solid light-dark(#2a2c33, #26282f); border-bottom-width: 0; } .appareil__socle { display: block; height: 12px; margin-inline: -18px; border-radius: 0 0 10px 10px; background: linear-gradient(light-dark(#c9ccd6, #33363f), light-dark(#a9adb9, #1c1e24)); } .appareil--telephone { width: 104px; margin-bottom: -2px; } .appareil--telephone .appareil__ecran { height: 206px; border-radius: 18px 18px 0 0; border: 5px solid light-dark(#2a2c33, #26282f); border-bottom-width: 0; } .mini { display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 8px; font-size: 9.5px; line-height: 1.25; color: var(--fg-doux); } .mini__tete { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; } .mini__tete .marque__signe { width: 13px; height: 13px; } .mini__tete b { font: 600 10.5px/1 var(--titre); color: var(--fg-fort); } .mini__tete .direct { margin-inline-start: auto; padding: 0; background: none; box-shadow: none; } .mini__ligne { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--filet); } .mini__ligne .robot-point { margin: 0; width: 7px; height: 7px; flex: none; } .mini__ligne span { color: var(--fg-fort); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini__ligne em { margin-inline-start: auto; font-style: normal; color: var(--vif); } .mini__or { display: flex; flex-direction: column; gap: 3px; margin-top: auto; padding: 6px 7px; border-radius: 7px; background: var(--or-voile); border: 1px solid var(--or-filet); } .mini__or > span:first-child { font: 600 7.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--chaud); } .mini__or b { font-size: 10px; color: var(--fg-fort); } .mini__options { display: flex; gap: 4px; flex-wrap: wrap; } .mini__options i { font-style: normal; padding: 2px 6px; border-radius: 999px; font-size: 8.5px; color: var(--fg-doux); background: var(--surface); border: 1px solid var(--filet); } .mini__options .mini__reco { color: var(--sur-or); background: var(--or); border-color: transparent; font-weight: 600; } .appareil--telephone .mini { padding: 7px 6px; } .appareil--telephone .mini__ligne em { display: none; } .appareil--telephone .mini__or b { font-size: 9px; overflow-wrap: anywhere; hyphens: auto; } .appareil--telephone .mini__options i:first-child { display: none; } @media (prefers-reduced-motion: no-preference) { /* La même décision se tranche au même instant sur les deux appareils. */ .mini__reco { animation: mini-choix 6s var(--expo) infinite; } .mini__or { animation: mini-carte 6s var(--expo) infinite; } } @keyframes mini-choix { 0%, 45% { box-shadow: none; } 50%, 80% { box-shadow: 0 0 0 2px var(--fond), 0 0 0 3.5px var(--or); } 100% { box-shadow: none; } } @keyframes mini-carte { 0%, 78% { opacity: 1; translate: 0 0; } 86% { opacity: 0; translate: 0 6px; } 94% { opacity: 0; translate: 0 6px; } 100% { opacity: 1; translate: 0 0; } } @media (max-width: 1023px) { .tuile { grid-column: span 6; } .tuile:last-child, .tuile--plusieurs { grid-column: span 12; } .tuile--partout { grid-column: span 12; } } @media (max-width: 760px) { .tuile--partout { grid-template-columns: minmax(0, 1fr); } .tuile--partout .tuile__visuel { height: 230px; } .appareil--ordinateur .appareil__ecran { height: 170px; } .appareil--telephone .appareil__ecran { height: 176px; } .mini > .mini__ligne:nth-child(4) { display: none; } .appareil--telephone .mini__ligne { display: none; } } @media (max-width: 640px) { .tuile, .tuile:last-child { grid-column: span 12; } } @media (max-width: 420px) { .tuile--partout .tuile__visuel { padding-inline: 14px; gap: 12px; } .appareil--ordinateur { width: 62%; } .appareil--telephone { width: 86px; } } /* La barre des quatre pages du menu, en icônes, sur les deux appareils. */ .mini__nav { display: flex; gap: 3px; } .mini__nav i { position: relative; flex: 1; display: grid; place-items: center; height: 17px; border-radius: 5px; color: var(--fg-pale); font-style: normal; } .mini__nav .icone { width: 10px; height: 10px; } .mini__nav .est-actif { color: var(--marque); background: color-mix(in oklab, var(--violet) 16%, transparent); } .mini__nav em { position: absolute; inset-block-start: -3px; inset-inline-end: 1px; min-width: 10px; height: 10px; padding-inline: 2px; display: grid; place-items: center; border-radius: 999px; font: 700 7px/1 var(--mono); font-style: normal; color: var(--sur-or); background: var(--or); } /* La notification de l'application installée, au haut du téléphone. */ .notif { position: absolute; inset-inline: -10px; inset-block-start: 14px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 6px 7px; border-radius: 10px; background: light-dark(rgb(255 255 255 / .96), rgb(38 40 48 / .96)); box-shadow: 0 10px 24px -8px rgb(0 0 0 / .45), 0 0 0 1px var(--filet); font-size: 8.5px; line-height: 1.25; color: var(--fg-doux); } .notif .marque__signe { width: 16px; height: 16px; flex: none; } .notif b { display: block; font-size: 8.5px; color: var(--fg-fort); } /* Branchez vos outils : l'onglet Services de Branchements, un service passe à « branché ». */ .tuile--branchements, .tuile--voir { grid-column: span 6; } .tuile--branchements .tuile__visuel, .tuile--voir .tuile__visuel { height: 214px; } .branchements { width: min(100%, 330px); padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--filet); font-size: 12px; } .branchements__tete { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; color: var(--fg-fort); } .branchements__tete .icone { width: 14px; height: 14px; color: var(--marque); } .branchements__onglet { margin-inline-start: auto; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; color: var(--marque); background: color-mix(in oklab, var(--violet) 14%, transparent); } .branchements__liste { display: grid; gap: 4px; } .service { display: flex; align-items: center; gap: 7px; padding: 3px 4px; color: var(--fg); } .service__nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .service .icone { width: 13px; height: 13px; color: var(--fg-pale); flex: none; } .service__etat { position: relative; margin-inline-start: auto; display: grid; justify-items: end; } .service__etat > span { grid-area: 1 / 1; font-size: 10.5px; white-space: nowrap; } .service__brancher { padding: 2px 9px; border-radius: 999px; color: #fff; background: var(--violet); } .service__branche { display: inline-flex; align-items: center; gap: 4px; color: var(--vif); } .service__branche i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; } .service--branche .service__brancher, .service--bascule .service__brancher, .service--libre .service__branche { visibility: hidden; } @media (prefers-reduced-motion: no-preference) { .service--bascule .service__brancher { visibility: visible; animation: service-avant 6s var(--expo) infinite; } .service--bascule .service__branche { animation: service-apres 6s var(--expo) infinite; } .service--bascule { animation: service-ligne 6s var(--expo) infinite; border-radius: 7px; } .notif { animation: notif 7s var(--expo) infinite; } .voir__geste { animation: voir-geste 7s var(--expo) infinite; } .voir__curseur { animation: voir-curseur 7s var(--expo) infinite; } .voir__prix i { animation: ecrit 7s var(--expo) infinite; } .voir__prix i:nth-child(2) { animation-delay: .5s; } .voir__prix i:nth-child(3) { animation-delay: 1s; } } @keyframes service-avant { 0%, 36% { opacity: 1; scale: 1; } 41%, 100% { opacity: 0; scale: .8; } } @keyframes service-apres { 0%, 43% { opacity: 0; translate: 6px 0; } 50%, 100% { opacity: 1; translate: 0 0; } } @keyframes service-ligne { 0%, 40% { background: transparent; } 48%, 70% { background: color-mix(in oklab, #22c55e 12%, transparent); } 85%, 100% { background: transparent; } } @keyframes notif { 0%, 10% { opacity: 0; translate: 0 -12px; } 16%, 80% { opacity: 1; translate: 0 0; } 88%, 100% { opacity: 0; translate: 0 -12px; } } /* Vous les voyez faire : la conversation, et à côté le navigateur de l'agent, en direct. */ .tuile--voir .tuile__visuel { justify-content: center; gap: 10px; } .voir__fil { flex: 0 1 40%; min-width: 0; } .voir__bulle { display: flex; align-items: flex-end; gap: 6px; font-size: 11.5px; line-height: 1.3; color: var(--fg-fort); } .voir__bulle .robot { width: 28px; height: 28px; flex: none; } .voir__bulle > span { padding: 7px 9px; border-radius: 12px 12px 12px 3px; background: var(--surface); border: 1px solid var(--filet); } .voir__navigateur { position: relative; flex: 0 1 58%; min-width: 0; align-self: stretch; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--filet-fort); } .voir__chrome { display: flex; align-items: center; gap: 4px; padding: 5px 7px; background: var(--surface-3); font: 500 9.5px/1 var(--mono); color: var(--fg-pale); } .voir__chrome > i { width: 6px; height: 6px; border-radius: 50%; background: var(--decor); } .voir__chrome > span:first-of-type { margin-inline-start: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .voir__chrome .direct { margin-inline-start: auto; padding: 0; background: none; box-shadow: none; } .voir__page { position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; } .voir__page > b { width: 55%; height: 8px; border-radius: 4px; background: var(--fg-pale); opacity: .6; } .voir__page > i { width: 85%; height: 5px; border-radius: 3px; background: var(--decor); } .voir__page > i + i { width: 65%; } .voir__prix { display: flex; gap: 5px; margin-top: 3px; } .voir__prix i { flex: 1; height: 26px; border-radius: 6px; border: 1px solid var(--filet-fort); background: var(--surface-2); transform-origin: 0 50%; } .voir__curseur { position: absolute; inset-inline-end: 22%; inset-block-end: 12px; width: 14px; height: 14px; color: var(--fg-fort); } .voir__curseur svg { width: 100%; height: 100%; fill: currentColor; stroke: var(--surface); stroke-width: 1.5; } .voir__geste { position: absolute; inset-inline-end: 6px; inset-block-end: 6px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; color: var(--sur-or); background: var(--or); box-shadow: 0 4px 14px -4px rgb(255 180 84 / .8); } @keyframes voir-geste { 0%, 60% { opacity: 0; translate: 0 6px; } 66%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } } @keyframes voir-curseur { 0% { translate: -60px -40px; } 25% { translate: -20px -30px; } 45% { translate: 0 -8px; } 55%, 100% { translate: 0 0; } } @media (max-width: 1023px) { .tuile--branchements, .tuile--voir { grid-column: span 12; } } @media (max-width: 420px) { .voir__fil { flex-basis: 44%; } .voir__bulle > span { font-size: 10.5px; } } /* Une question ? Robert vous montre : la question posée, l'écran assombri, Robert va jusqu'au bouton exact et le pointe du doigt (#5318, dessin repris des captures de test de #5263). */ .tuile--robert { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(1.2rem, 3vw, 2.5rem); } .tuile--robert .tuile__visuel { height: 260px; margin: 0; gap: clamp(12px, 2.5vw, 26px); background: radial-gradient(60% 80% at 70% 100%, var(--froid-voile), transparent 70%), var(--surface-2); } .tuile--robert h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -.03em; } .tuile--robert p { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); margin-top: .5rem; max-width: 30rem; } .robert__page { --robert-cercle: #0e7490; position: relative; flex: 0 1 60%; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--filet); font-size: 12px; } .robert__page > b { color: var(--fg-fort); font-size: 13px; } .robert__page > i { width: 88%; height: 5px; border-radius: 3px; background: var(--decor); } .robert__page > i + i { width: 62%; } .robert__champ { margin-top: 4px; padding: 7px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--filet-fort); color: var(--fg-pale); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .robert__rangee { display: flex; align-items: center; gap: 4px; margin-top: 2px; } /* L'écran assombri : seuls le bouton montré et Robert restent dans la lumière. */ .robert__page::after { content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: inherit; background: light-dark(rgb(30 32 48 / .5), rgb(0 0 0 / .62)); pointer-events: none; } .robert__bouton, .robert__guide { position: relative; z-index: 2; } .robert__bouton { flex: none; padding: 6px 12px; border-radius: 8px; font-weight: 600; color: #fff; background: var(--violet); box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--robert-cercle); } .robert__guide { display: flex; align-items: center; min-width: 0; } .robert__guide .robot { width: 64px; height: 64px; flex: none; } .robert__main { width: 50px; height: 34px; flex: none; margin-inline-start: 8px; margin-inline-end: -4px; } .robert__main-trait rect { fill: var(--robert-cercle); stroke: var(--robert-cercle); stroke-width: 6; } .robert__main-fond rect { fill: #fff; } .robert__main-pli { fill: none; stroke: #b9c7d6; stroke-width: 1.6; stroke-linecap: round; } .robert__fil { flex: 0 1 34%; min-width: 0; display: flex; flex-direction: column; gap: 10px; font-size: 12px; line-height: 1.3; } .robert__question { align-self: flex-end; padding: 7px 10px; border-radius: 12px 12px 3px 12px; color: #fff; background: var(--violet); } .robert__bulle { align-self: flex-start; padding: 7px 10px; border-radius: 12px 12px 12px 3px; color: var(--fg-fort); background: var(--surface); border: 1px solid var(--filet); } [dir="rtl"] .robert__main { scale: -1 1; } @media (prefers-reduced-motion: no-preference) { .robert__question { animation: robert-question 8s var(--expo) infinite; } .robert__page::after { animation: robert-voile 8s var(--expo) infinite; } .robert__bouton { animation: robert-cercle 8s var(--expo) infinite; } .robert__guide { animation: robert-guide 8s var(--expo) infinite; } .robert__main { animation: robert-main 8s ease-in-out infinite; } .robert__bulle { animation: robert-bulle 8s var(--expo) infinite; } } @keyframes robert-question { 0%, 4% { opacity: 0; translate: 0 8px; } 10%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } } @keyframes robert-voile { 0%, 18% { opacity: 0; } 26%, 92% { opacity: 1; } 100% { opacity: 0; } } @keyframes robert-cercle { 0%, 18% { box-shadow: 0 0 0 0 transparent; } 26%, 92% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--robert-cercle); } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes robert-guide { 0%, 20% { opacity: 0; translate: 46px 0; } 36%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } } @keyframes robert-main { 0%, 40% { translate: 0 0; } 48% { translate: -5px 0; } 56% { translate: 0 0; } 64% { translate: -5px 0; } 72%, 100% { translate: 0 0; } } @keyframes robert-bulle { 0%, 38% { opacity: 0; translate: 0 8px; } 44%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } } [dir="rtl"] .robert__guide { animation-name: robert-guide-rtl; } @keyframes robert-guide-rtl { 0%, 20% { opacity: 0; translate: -46px 0; } 36%, 92% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } } @media (max-width: 760px) { .tuile--robert { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .tuile--robert .tuile__visuel { height: auto; flex-direction: column-reverse; align-items: stretch; } .robert__fil { flex-basis: auto; } .robert__page { flex-basis: auto; } } .v-saisie { padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--filet-fort); font-size: 13px; color: var(--fg-fort); white-space: nowrap; } .v-saisie span { display: inline-block; overflow: hidden; vertical-align: bottom; max-width: 0; animation: tape 5s steps(22) infinite; } @keyframes tape { 0% { max-width: 0; } 45%, 100% { max-width: 12.5em; } } .v-fleche { color: var(--fg-pale); animation: glisse 5s ease-in-out infinite; } @keyframes glisse { 0%, 45% { opacity: 0; translate: -6px 0; } 55%, 100% { opacity: 1; translate: 0 0; } } .tuile--boite .puce { animation: glisse 5s ease-in-out infinite; animation-delay: .2s; } .v-note { width: 78%; padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--filet); display: flex; flex-direction: column; gap: 7px; } .v-note b { font: 500 11px/1 var(--mono); color: var(--marque); } .v-note i { height: 6px; border-radius: 3px; background: var(--decor); transform-origin: 0 50%; animation: ecrit 6s var(--expo) infinite; } .v-note i:nth-of-type(2) { width: 80%; animation-delay: .4s; } .v-note i:nth-of-type(3) { width: 55%; animation-delay: .8s; } @keyframes ecrit { 0% { scale: 0 1; } 30%, 100% { scale: 1 1; } } .v-avatars { display: flex; } .v-avatars i { width: 46px; height: 46px; margin-inline-start: -10px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--titre); font-style: normal; color: #fff; border: 3px solid var(--surface-2); background: linear-gradient(135deg, #5f34f5, #8b68ff); } .v-avatars i:nth-child(2) { background: linear-gradient(135deg, #0a90b4, #22d3ee); } .v-avatars__nouveau { background: var(--surface-3) !important; color: var(--marque) !important; border-style: dashed !important; border-color: var(--filet-fort) !important; animation: arrive 4s var(--expo) infinite; } @keyframes arrive { 0%, 20% { translate: 20px 0; opacity: 0; } 40%, 100% { translate: 0 0; opacity: 1; } } /* ----------------------------------------------------------------- Projets */ /* Deux temps : le tableau des projets, puis le projet ouvert sur ses colonnes, celles du produit. Deux cartes changent de colonne (cycle de 12 s) ; sans mouvement, état de départ. */ .tableau { display: grid; grid-template-columns: minmax(250px, .32fr) minmax(0, 1fr); border-radius: 22px; background: var(--surface); box-shadow: var(--ombre-haute); overflow: hidden; font-size: 13px; --boucle: 12s; } .tableau__liste { border-inline-end: 1px solid var(--filet); background: var(--fond-2); } .tableau__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; padding: 12px 18px; border-bottom: 1px solid var(--filet); background: var(--surface-2); } .tableau__tete b { display: inline-flex; align-items: center; gap: 9px; font: 600 15px/1.2 var(--titre); color: var(--fg-fort); } .tableau__tete .icone { color: var(--marque); } .tableau__nombre { font: 600 11px/1 var(--mono); padding: 4px 8px; border-radius: 999px; color: var(--fg-doux); background: var(--surface-3); } .tableau__cartes { display: flex; flex-direction: column; gap: 8px; padding: 12px; } .projet { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--filet); } .projet.est-ouvert { border-color: color-mix(in oklab, var(--violet) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--violet) 14%, transparent); } .projet.est-ouvert::after { content: ""; position: absolute; inset-inline-end: -13px; top: 50%; width: 12px; height: 2px; background: color-mix(in oklab, var(--violet) 55%, transparent); } .projet__nom { display: flex; align-items: center; gap: 8px; min-width: 0; } .projet__nom b { color: var(--fg-fort); font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .projet__logo { --h: 280; flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 700 10px/1 var(--titre); color: #fff; background: linear-gradient(135deg, oklch(.6 .17 var(--h)), oklch(.5 .15 calc(var(--h) + 30))); } .projet__logo--1 { --h: 340; } .projet__logo--2 { --h: 40; } .projet__logo--3 { --h: 145; } .projet__logo--4 { --h: 220; } .projet__logo--5 { --h: 290; } .projet p { color: var(--fg-doux); font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .projet__pied { display: flex; } .projet.est-ouvert p { -webkit-line-clamp: 2; } .projet__pied .puce { font-size: 10px; padding: 2px 8px; } .kanban { min-width: 0; display: flex; flex-direction: column; } .kanban__filtres { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; } .filtre { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; color: var(--fg-doux); background: var(--surface-2); border: 1px solid var(--filet); white-space: nowrap; } .filtre b { font-weight: 600; color: var(--fg-fort); } .filtre.est-actif { color: var(--marque); border-color: color-mix(in oklab, var(--violet) 45%, transparent); background: color-mix(in oklab, var(--violet) 10%, transparent); } .kanban__colonnes { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 12px 16px 16px; align-items: stretch; } .colonne { border-radius: 14px; background: var(--surface-2); border: 1px solid var(--filet); padding: 0 8px 8px; min-width: 0; } .colonne__tete { display: flex; align-items: center; gap: 6px; padding: 10px 2px 4px; font-size: 12px; font-weight: 600; color: var(--fg-fort); white-space: nowrap; } .colonne__tete .icone { width: 14px; height: 14px; color: var(--fg-pale); } .compteur { display: inline-grid; margin-inline-start: auto; min-width: 20px; padding: 2px 6px; border-radius: 999px; font: 600 10.5px/1.2 var(--mono); text-align: center; color: var(--fg-doux); background: var(--surface-3); } .compteur i, .filtre b i { grid-area: 1 / 1; font-style: normal; } .filtre b { display: inline-grid; } .compte-apres { opacity: 0; } .tache { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; padding: 8px 9px; border-radius: 10px; background: var(--surface); border: 1px solid var(--filet); --ombre-carte: 0 1px 2px light-dark(rgb(20 20 50 / .05), rgb(0 0 0 / .3)); box-shadow: var(--ombre-carte); } .tache > span:first-child { flex-basis: 100%; font-size: 12px; line-height: 1.35; color: var(--fg-fort); } .tache--avous { border-color: var(--or-filet); background: linear-gradient(160deg, light-dark(#fff6e2, rgb(255 200 97 / .12)), var(--surface)); } .colonne--faite .tache > span:first-child { color: var(--fg-doux); } .role-puce { padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; color: var(--marque); background: color-mix(in oklab, var(--violet) 12%, transparent); } .role-puce--rose { color: var(--rose-texte); background: color-mix(in oklab, var(--rose) 12%, transparent); } .role-puce--bleu { color: light-dark(#2449b8, #8fb0ff); background: color-mix(in oklab, var(--bleu) 14%, transparent); } .role-puce--cyan { color: var(--vif); background: color-mix(in oklab, var(--cyan) 12%, transparent); } .role-puce--or { color: var(--sur-or); background: var(--or); } /* Les cartes qui changent de colonne sont en bas de la leur, leur place toujours gardée : elles ne changent jamais de taille, seules leur opacité et leur position glissent, et la hauteur des colonnes ne bouge pas. En cours garde une seule place, que la carte qui part cède à celle qui arrive. La carte qui arrive n'existe pas encore : état de départ, celui qu'on garde sans mouvement. */ .place { display: grid; } .place > .tache { grid-area: 1 / 1; align-self: start; } .tache--arrivee { opacity: 0; visibility: hidden; } @media (prefers-reduced-motion: no-preference) { .tache--depart.tache--b { animation: part-b var(--boucle) var(--expo) infinite; } .tache--arrivee.tache--b { animation: arrive-b var(--boucle) var(--expo) infinite; } .tache--depart.tache--a { animation: part-a var(--boucle) var(--expo) infinite; } .tache--arrivee.tache--a { animation: arrive-a var(--boucle) var(--expo) infinite; } .compteur .compte-avant, .filtre .compte-avant { animation: compte-b-avant var(--boucle) steps(1) infinite; } .compteur .compte-apres, .filtre .compte-apres { animation: compte-b-apres var(--boucle) steps(1) infinite; } .colonne:nth-child(4) .compte-avant { animation-name: compte-a-avant; } .colonne:nth-child(4) .compte-apres { animation-name: compte-a-apres; } .colonne:nth-child(2) .compte-avant { animation-name: compte-milieu-avant; } .colonne:nth-child(2) .compte-apres { animation-name: compte-milieu-apres; } } /* b va vers la droite (En cours vers Faite), a vers la gauche (À faire vers En cours). */ @keyframes part-b { 0%, 21% { opacity: 1; visibility: visible; translate: 0 0; box-shadow: var(--ombre-carte); } 24% { box-shadow: 0 0 0 2px var(--cyan); } 30%, 93% { opacity: 0; visibility: hidden; translate: 36px 0; } 100% { opacity: 1; visibility: visible; translate: 0 0; } } @keyframes arrive-b { 0%, 30% { opacity: 0; visibility: hidden; translate: -36px 0; } 37% { opacity: 1; visibility: visible; translate: 0 0; box-shadow: 0 0 0 2px var(--cyan), 0 0 22px rgb(34 211 238 / .45); } 50%, 86% { opacity: 1; visibility: visible; translate: 0 0; box-shadow: var(--ombre-carte); } 92%, 100% { opacity: 0; visibility: hidden; translate: 0 0; } } @keyframes part-a { 0%, 47% { opacity: 1; visibility: visible; translate: 0 0; box-shadow: var(--ombre-carte); } 50% { box-shadow: 0 0 0 2px var(--rose); } 56%, 93% { opacity: 0; visibility: hidden; translate: -36px 0; } 100% { opacity: 1; visibility: visible; translate: 0 0; } } @keyframes arrive-a { 0%, 56% { opacity: 0; visibility: hidden; translate: 36px 0; } 63% { opacity: 1; visibility: visible; translate: 0 0; box-shadow: 0 0 0 2px var(--rose), 0 0 22px rgb(217 70 143 / .4); } 76%, 86% { opacity: 1; visibility: visible; translate: 0 0; box-shadow: var(--ombre-carte); } 92%, 100% { opacity: 0; visibility: hidden; translate: 0 0; } } @keyframes compte-b-avant { 0% { opacity: 1; } 30% { opacity: 0; } 93% { opacity: 1; } } @keyframes compte-b-apres { 0% { opacity: 0; } 30% { opacity: 1; } 93% { opacity: 0; } } @keyframes compte-a-avant { 0% { opacity: 1; } 56% { opacity: 0; } 93% { opacity: 1; } } @keyframes compte-a-apres { 0% { opacity: 0; } 56% { opacity: 1; } 93% { opacity: 0; } } @keyframes compte-milieu-avant { 0% { opacity: 1; } 30% { opacity: 0; } 60% { opacity: 1; } } @keyframes compte-milieu-apres { 0% { opacity: 0; } 30% { opacity: 1; } 60% { opacity: 0; } } @media (max-width: 1100px) { .tableau { grid-template-columns: minmax(0, 1fr); } .tableau__liste { border-inline-end: 0; border-bottom: 1px solid var(--filet); } .tableau__cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .projet:nth-child(n+4) { display: none; } .projet.est-ouvert::after { display: none; } } @media (max-width: 760px) { .kanban__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .colonne--faite { grid-column: span 2; } .tableau__cartes { grid-template-columns: minmax(0, 1fr); } .projet:nth-child(n+3) { display: none; } } @media (max-width: 420px) { .kanban__colonnes { padding-inline: 10px; gap: 8px; } .kanban__filtres { padding-inline: 10px; } .filtre:nth-child(n+4) { display: none; } } /* ---------------------------------------------------- Jusqu'où ils vont */ /* Sans script : le cran et les accès sont de vrais choix, le visuel suit par :has(). */ .reglage { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); gap: 14px; } .reglage__crans, .acces { padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: 22px; border: 1px solid var(--filet); box-shadow: var(--ombre-douce); } .reglage__crans { display: grid; gap: 1.6rem; background: linear-gradient(130deg, var(--froid-voile), var(--surface) 55%, var(--or-voile)); } fieldset.crans, fieldset.acces__liste { margin: 0; padding: 0; border: 0; min-width: 0; } .crans { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } fieldset.crans { padding-top: 36px; } .crans__piste { position: absolute; top: 10px; left: calc(100% / 6); right: calc(100% / 6); height: 4px; border-radius: 2px; background: var(--filet-fort); } .crans__piste::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--cran, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 12px rgb(116 81 255 / .5); transition: width .6s var(--expo), height .6s var(--expo); } .crans__piste i { position: absolute; top: 50%; left: var(--cran, 50%); width: 24px; height: 24px; translate: -50% -50%; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 5px var(--violet), 0 0 22px 2px rgb(116 81 255 / .7); transition: left .6s var(--expo), top .6s var(--expo); } .reglage:has(input[name="cran"][value="1"]:checked) { --cran: 0%; } .reglage:has(input[name="cran"][value="2"]:checked) { --cran: 50%; } .reglage:has(input[name="cran"][value="3"]:checked) { --cran: 100%; } .cran { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--filet); cursor: pointer; transition: border-color .3s, box-shadow .3s, background .3s; } .cran input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .cran b { font: 600 1.02rem/1.3 var(--titre); color: var(--fg-fort); } .cran span { font-size: .9rem; color: var(--fg-doux); } .cran:hover { border-color: color-mix(in oklab, var(--violet) 45%, transparent); } .cran:has(input:checked) { border-color: var(--violet); background: color-mix(in oklab, var(--violet) 9%, var(--surface)); box-shadow: 0 0 0 1px var(--violet) inset, 0 18px 40px -22px rgb(116 81 255 / .8); } .cran:has(input:focus-visible) { outline: 3px solid var(--vif); outline-offset: 3px; } .effet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .effet::before { content: attr(data-titre); grid-column: 1 / -1; font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-pale); } .effet li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--filet); transition: border-color .4s, background .4s; } .effet li > span { color: var(--fg-fort); font-weight: 500; font-size: .95rem; } .effet em { flex: none; padding: 4px 10px; border-radius: 999px; font: 500 11.5px/1.2 var(--mono); font-style: normal; white-space: nowrap; transition: opacity .4s, scale .4s var(--expo), display .4s allow-discrete; } @starting-style { .effet em { opacity: 0; scale: .7; } } .effet__seul { color: var(--vif); background: color-mix(in oklab, var(--cyan) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--cyan) 30%, transparent) inset; } .effet__attend { display: none; color: var(--sur-or); background: var(--or); font-weight: 600; } .effet__propose { display: none; color: var(--fg-fort); background: color-mix(in oklab, var(--violet) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--violet) 40%, transparent) inset; } .reglage:has(input[name="cran"]:is([value="1"], [value="2"]):checked) .effet--cap .effet__attend, .reglage:has(input[name="cran"][value="3"]:checked) .effet--cap .effet__propose, .reglage:has(input[name="cran"][value="1"]:checked) :is(.effet--des-2, .effet--des-3) .effet__attend, .reglage:has(input[name="cran"][value="2"]:checked) .effet--des-3 .effet__attend { display: inline-flex; } .reglage:has(input[name="cran"][value="1"]:checked) :is(.effet--des-2, .effet--des-3) .effet__seul, .reglage:has(input[name="cran"][value="2"]:checked) .effet--des-3 .effet__seul { display: none; } .reglage:has(input[name="cran"]:is([value="1"], [value="2"]):checked) .effet--cap, .reglage:has(input[name="cran"][value="1"]:checked) :is(.effet--des-2, .effet--des-3), .reglage:has(input[name="cran"][value="2"]:checked) .effet--des-3 { border-color: var(--or-filet); background: linear-gradient(90deg, var(--surface), var(--or-voile)); } .acces { display: flex; flex-direction: column; gap: 1.1rem; background: var(--surface); } .acces__liste { display: grid; gap: 8px; counter-reset: ouverts; } .acces__un { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--filet); color: var(--fg-fort); font-weight: 500; cursor: pointer; transition: border-color .3s; } .acces__un input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .acces__un .icone { color: var(--fg-pale); transition: color .3s; } .acces__un::after { content: ""; margin-inline-start: auto; width: 40px; height: 22px; flex: none; border-radius: 999px; background: radial-gradient(circle at 11px 50%, var(--fg-pale) 7px, transparent 7.5px) var(--surface-3); box-shadow: 0 0 0 1px var(--filet-fort) inset; transition: background-color .3s; } .acces__un:has(input:checked) { counter-increment: ouverts; border-color: color-mix(in oklab, var(--cyan) 35%, transparent); } .acces__un:has(input:checked)::after { background: radial-gradient(circle at 29px 50%, #fff 7px, transparent 7.5px) color-mix(in oklab, var(--cyan) 70%, var(--violet)); box-shadow: 0 0 14px -2px rgb(34 211 238 / .7); } .acces__un:has(input:checked) .icone { color: var(--vif); } .acces__un:has(input:focus-visible) { outline: 3px solid var(--vif); outline-offset: 2px; } .acces__total::after { content: attr(data-avant) counter(ouverts) attr(data-apres); font: 500 12px/1.3 var(--mono); color: var(--fg-pale); } .acces__note { margin-top: auto; font: 500 clamp(1.05rem, 1rem + .3vw, 1.2rem)/1.4 var(--titre); color: var(--fg-fort); } @media (max-width: 1023px) { .reglage { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .crans { grid-template-columns: minmax(0, 1fr); } fieldset.crans { padding: 0; padding-inline-start: 30px; } .crans__piste { top: calc(100% / 6); bottom: calc(100% / 6); left: 8px; right: auto; width: 4px; height: auto; } [dir="rtl"] .crans__piste { left: auto; right: 8px; scale: none; } .crans__piste::before { width: auto; right: 0; height: var(--cran, 50%); } .crans__piste i { left: 50%; top: var(--cran, 50%); } .effet { grid-template-columns: minmax(0, 1fr); } } /* ----------------------------------------------------------------- Origine */ .origine { background: radial-gradient(50% 38% at 20% 45%, var(--froid-voile), transparent), radial-gradient(34% 32% at 86% 55%, var(--or-voile), transparent); } .origine__grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .origine .section-tete { margin-bottom: 1.8rem; } .citation { margin: 0; } .citation p { font: 500 clamp(1.25rem, 1rem + 1.05vw, 1.85rem)/1.45 var(--titre); letter-spacing: -.02em; color: var(--fg-fort); } .citation p { quotes: auto; } :lang(fr) .citation p { quotes: "«\00a0" "\00a0»"; } .citation p::before { content: open-quote; color: var(--marque); } .citation p::after { content: close-quote; color: var(--marque); } .citation footer { display: flex; align-items: center; gap: .9rem; margin-top: 1.8rem; color: var(--fg-doux); font-size: .95rem; } .citation footer b { color: var(--fg-fort); } .citation__initiales { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 700 1rem/1 var(--titre); color: #fff; background: linear-gradient(135deg, var(--violet), var(--cyan)); box-shadow: 0 0 0 4px var(--fond), 0 0 0 5px var(--filet-fort); } /* Le chemin : quatre étapes cochées de la coche du logo, la dernière en or. */ .chemin { position: relative; display: flex; flex-direction: column; gap: 1.6rem; padding-inline-start: 2.6rem; counter-reset: chemin; } .chemin::before { content: ""; position: absolute; inset-inline-start: 11px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(var(--violet), var(--cyan) 70%, var(--or)); } .chemin li { position: relative; font: 500 clamp(1.05rem, .95rem + .45vw, 1.3rem)/1.3 var(--titre); letter-spacing: -.01em; color: var(--fg-fort); } .chemin .coche { position: absolute; inset-inline-start: calc(-2.6rem - 1px); top: 50%; width: 26px; height: 26px; translate: 0 -50%; padding: 2px; border-radius: 8px; background: var(--fond); color: var(--marque); } .chemin li:nth-child(2) .coche { color: color-mix(in oklab, var(--marque) 50%, var(--vif)); } .chemin li:nth-child(3) .coche { color: var(--vif); } .chemin .chemin__or { color: var(--chaud); font-weight: 600; } .chemin .chemin__or .coche { inset-inline-start: calc(-2.6rem - 5px); width: 34px; height: 34px; color: var(--chaud); } .chemin .chemin__or .coche__halo { opacity: .25; } .origine__nom { grid-column: 1 / -1; margin-top: clamp(2rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--filet); text-align: center; font: 500 clamp(1.2rem, 1rem + 1vw, 1.8rem)/1.4 var(--titre); letter-spacing: -.02em; color: var(--fg); text-wrap: balance; } .origine__nom em { color: var(--fg-fort); } @media (max-width: 900px) { .origine__grille { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------- Questions */ .faq { display: flex; flex-direction: column; gap: 10px; } .faq details { border-radius: 18px; background: var(--surface); border: 1px solid var(--filet); transition: border-color .3s, background .3s; } .faq details[open] { border-color: color-mix(in oklab, var(--violet) 40%, transparent); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; cursor: pointer; list-style: none; font: 600 1.08rem/1.35 var(--titre); color: var(--fg-fort); border-radius: 18px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border: solid var(--fg-pale); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -3px; transition: rotate .35s var(--expo), translate .35s var(--expo); } .faq details[open] summary::after { rotate: 225deg; translate: 0 3px; border-color: var(--marque); } .faq details p { padding: 0 1.4rem 1.3rem; color: var(--fg-doux); } .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--expo), content-visibility .4s allow-discrete; } .faq details[open]::details-content { block-size: auto; } /* ------------------------------------------------------------- Inscription */ .inscription { padding-bottom: clamp(4rem, 8vw, 7rem); } .inscription__carte, .courte__carte { position: relative; padding: clamp(1.75rem, 5vw, 3.5rem); border-radius: 30px; background: radial-gradient(80% 60% at 50% 0%, var(--or-voile), transparent 70%), var(--surface); border: 1px solid var(--filet); box-shadow: var(--ombre-haute); text-align: center; } .inscription__carte h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); } .inscription__sous { margin: 1rem auto 0; max-width: 34rem; color: var(--fg-doux); font-size: 1.05rem; } .coche--oui { width: 52px; height: 52px; margin: 0 auto 1.4rem; color: var(--fg-pale); transition: color .5s, scale .5s var(--expo); } .inscription__carte:has(#email:valid:not(:placeholder-shown)) .coche--oui, .est-inscrit .coche--oui { color: var(--chaud); scale: 1.12; } .inscription__carte:has(#email:valid:not(:placeholder-shown)) .coche--oui .coche__halo, .est-inscrit .coche--oui .coche__halo { opacity: .2; } .coche--tete { width: 40px; height: 40px; margin: 0 auto 1.4rem; color: var(--marque); } .formulaire { margin-top: 2.2rem; text-align: start; display: flex; flex-direction: column; } .champ__label, legend { display: block; font-weight: 600; color: var(--fg-fort); margin-bottom: .55rem; font-size: .98rem; } .champ { width: 100%; min-height: 3.4rem; padding: .85rem 1.1rem; border-radius: 14px; font: 400 1.05rem/1.3 var(--sans); color: var(--fg-fort); background: var(--surface-2); border: 1px solid var(--filet-fort); transition: border-color .25s, box-shadow .25s; } .champ::placeholder { color: var(--fg-pale); } .champ:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px color-mix(in oklab, var(--violet) 25%, transparent); } .champ:valid:not(:placeholder-shown) { border-color: var(--or-filet); } fieldset { border: 0; padding: 0; margin: 1.6rem 0 0; min-width: 0; } legend { padding: 0; } .choix { display: flex; flex-wrap: wrap; gap: .5rem; } .choix label { position: relative; } .choix input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .choix span { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .5rem 1.05rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--filet-fort); color: var(--fg); font-size: .95rem; transition: background .2s, border-color .2s, color .2s; cursor: pointer; } .choix label:hover span { border-color: color-mix(in oklab, var(--violet) 50%, transparent); } .choix input:checked + span { color: var(--fg-fort); background: color-mix(in oklab, var(--violet) 16%, transparent); border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet) inset; } .choix input:focus-visible + span { outline: 3px solid var(--vif); outline-offset: 2px; } .formulaire .bouton { margin-top: 2rem; min-height: 3.6rem; font-size: 1.08rem; } .consentement { margin-top: 1rem; text-align: center; font-size: .88rem; color: var(--fg-pale); } .piege { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .erreur { margin-top: 1.5rem; padding: .85rem 1.1rem; border-radius: 12px; color: light-dark(#991b1b, #fecaca); background: light-dark(#fdecec, rgb(239 68 68 / .12)); border: 1px solid light-dark(#f5b5b5, rgb(239 68 68 / .35)); } .merci { margin-top: 1.4rem; font: 500 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.45 var(--titre); color: var(--chaud); } /* --------------------------------------------------------------------- Pied */ .pied { padding: 2.2rem 0 2.6rem; border-top: 1px solid var(--filet); color: var(--fg-pale); font-size: .93rem; } .pied__cadre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pied a { color: var(--fg-doux); } .marque--pied { font-size: 1rem; } .marque--pied .logo { height: 30px; } /* ------------------------------------------------------------------ Mobile */ @media (max-width: 900px) { .journee__corps { grid-template-columns: minmax(0, 1fr); gap: 0; } .journee__ecran { order: -1; top: calc(var(--barre) + .75rem); height: 360px; z-index: 2; } .journee__ecran::after { content: ""; position: absolute; left: -2rem; right: -2rem; bottom: -2.5rem; height: 2.5rem; background: linear-gradient(var(--fond-2), transparent); pointer-events: none; } .ecran { border-radius: 20px; font-size: 13px; } .ecran__barre { padding: 16px 18px 0; } .scene { inset: 64px 16px 16px; gap: 10px; } .etape, .etape:first-child, .etape:last-child { min-height: 48vh; justify-content: center; padding-block: 2rem; } .etape:first-child { padding-top: 3rem; } .etape:last-child { min-height: 56vh; } .panneau { padding: 12px 14px; } .panneau__tete { margin-bottom: 6px; } .panneau__tete b { font-size: 15px; } .qui-lance .robot { width: 28px; height: 28px; } .tri li { padding: 6px 0; } .tri b { font-size: 19px; } .agenda, .boites-recues, .decision__avis, .prospects, .fil-relais, .page-offre__cartes, .barres-semaines, .decoupe__qui, .scene--3 .decision + .decision, .rangee-robots--tournee { display: none; } .courbe .panneau__tete { margin-bottom: 0; } .pile-lignes li { padding: 7px 10px; font-size: 12.5px; } .idees { padding: 8px 10px; gap: 6px; flex-wrap: nowrap; } .idees__titre { display: none; } .idee { padding: 4px 10px; font-size: 11.5px; white-space: nowrap; } .decision__tete b { font-size: 15px; } .options--ligne .option { padding: 5px 10px; font-size: 12px; } .resultats { gap: 8px; } .resultat { padding: 10px; gap: 5px; font-size: 12px; } .resultat__qui { font-size: 11px; } .resultat__qui .robot, .resultat__nombre + span { display: none; } .resultat__nombre { font-size: 28px; } .resultats { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); } .chantier__titre { font-size: 14.5px; } .carte-cadeau { padding: 8px 10px; } .carte-cadeau b { font-size: 14px; } .carte-cadeau__code { display: none; } .chantier__liste li { font-size: 11px; gap: 5px; line-height: 1.25; } .chantier__liste .icone { display: none; } .relais__agent { padding: 8px 6px; } .relais__agent .robot { width: 34px; height: 34px; } .relais__agent > span { display: none; } .page-offre__corps { padding: 12px 14px; gap: 6px; } .page-offre__corps b { font-size: 17px; } .page-offre__etat { top: auto; bottom: 12px; } .lune .icone { width: 30px; height: 30px; } .tournees li { padding: 8px 12px; grid-template-columns: 52px minmax(0, 1fr) auto; } } @media (max-width: 420px) { .journee__ecran { height: 340px; } .tri__boites { display: none; } .pile-lignes .puce, .tournees .puce { display: none; } .qui-lance .puce { display: none; } .resultat > .puce { font-size: 10px; padding: 2px 7px; white-space: normal; } .idee + .idee { display: none; } } /* ----------------------------------------------------------- Mouvement réduit */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .v-saisie span { max-width: none; } .ecran__horloge.tourne { animation: none; } } /* ------------------------------------------------------------ Très grand écran */ @media (min-width: 1800px) { .cadre { max-width: 1360px; } .cadre--large { max-width: 1480px; } .cadre--etroit { max-width: 820px; } .parcours { --gouttiere: max(1.25rem, calc((100% - 1360px) / 2 - 4rem)); } .poste { font-size: 15px; } .poste__corps { min-height: 520px; } } /* Petit mobile : le haut du poste se voit sans défiler (390 x 844). */ @media (max-width: 479px) { .ouverture { padding-top: 1.25rem; } .pastille { font-size: .64rem; letter-spacing: 0; padding: .4rem .75rem; } .pastille__point { margin-inline-end: .4rem; } h1 { margin-top: 1rem; font-size: 2.45rem; } .chapo { font-size: .95rem; line-height: 1.5; margin-top: 1rem; } .appels { margin-top: 1.3rem; gap: .6rem; } .appels .bouton { min-height: 3rem; padding-block: .7rem; } .scene-poste { margin-top: 1.75rem; } } /* 2K et au-delà : la page grandit au lieu de flotter au milieu. */ @media (min-width: 2200px) { html { font-size: 118%; } .cadre { max-width: 1600px; } .cadre--large { max-width: 1760px; } .cadre--etroit { max-width: 960px; } .barre__cadre { max-width: 1760px; } .parcours { --gouttiere: max(1.25rem, calc((100% - 1600px) / 2 - 4.5rem)); } .poste, .ecran, .tableau { zoom: 1.15; } } /* ------------------------------------------------------------- Langues (#4606) */ .langues { position: relative; flex: none; } .langues summary { display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 .7rem 0 .55rem; border-radius: 999px; border: 1px solid var(--filet); background: var(--surface-2); color: var(--fg-doux); font: 600 .74rem/1 var(--mono); letter-spacing: .04em; cursor: pointer; list-style: none; transition: color .2s, border-color .2s; } .langues summary::-webkit-details-marker { display: none; } .langues summary:hover, .langues[open] summary { color: var(--fg-fort); border-color: var(--filet-fort); } .langues summary .icone { width: 16px; height: 16px; } .langues__code { min-width: 1.4em; text-align: center; } .langues__liste { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 60; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; width: max-content; min-width: 15rem; padding: 6px; border-radius: 18px; background: var(--surface); border: 1px solid var(--filet); box-shadow: var(--ombre-haute); } .langues[open] .langues__liste { animation: langues-ouvre .25s var(--expo); } @keyframes langues-ouvre { from { opacity: 0; translate: 0 -6px; } } .langues__liste a { display: block; padding: .5rem .8rem; border-radius: 12px; color: var(--fg); text-decoration: none; font: 500 .92rem/1.3 var(--sans); } .langues__liste a:hover { color: var(--fg-fort); background: var(--surface-3); } .langues__liste a[aria-current] { color: var(--fg-fort); background: var(--froid-voile); box-shadow: 0 0 0 1px color-mix(in oklab, var(--violet) 45%, transparent) inset; } .langues__liste a:focus-visible { outline-offset: -2px; } @media (max-width: 479px) { .barre__cadre { gap: .6rem; } .langues summary { padding-inline: .5rem; } } /* ------------------------------------------------- Pages de texte (#4606) */ .texte { position: relative; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6.5rem); background: radial-gradient(50% 30% at 15% 0%, var(--froid-voile), transparent), radial-gradient(40% 25% at 90% 8%, var(--or-voile), transparent); } .cadre--texte { max-width: 780px; } .texte__tete { margin-bottom: 2.2rem; } .texte__tete .coche--tete { margin-inline: 0; } .texte h1 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.4rem); line-height: 1.06; letter-spacing: -.035em; } .texte__date { margin-top: 1rem; font: 500 .82rem/1.4 var(--mono); color: var(--fg-pale); } .texte__foi { margin-top: .5rem; color: var(--fg-doux); font-size: .95rem; } .texte__bloc { padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.3rem, 3vw, 2.1rem); border-radius: 22px; background: var(--surface); border: 1px solid var(--filet); box-shadow: var(--ombre-douce); } .texte__bloc + .texte__bloc { margin-top: 12px; } .texte__bloc h2 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); letter-spacing: -.02em; margin-bottom: .75rem; } .texte__bloc p { color: var(--fg); } .texte__bloc :is(p, ul) + :is(p, ul) { margin-top: .9rem; } .texte__bloc ul { display: flex; flex-direction: column; gap: .55rem; } .texte__bloc li { position: relative; padding-inline-start: 1.35rem; color: var(--fg); } .texte__bloc li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 8px rgb(116 81 255 / .6); } .texte strong { color: var(--fg-fort); font-weight: 600; } .texte__retour { margin-top: 2.2rem; } .bouton--discret { color: var(--fg-fort); background: var(--surface); box-shadow: 0 0 0 1px var(--filet-fort) inset, var(--ombre-douce); } .bouton--discret:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--violet) 55%, transparent) inset, var(--ombre-douce); } .bouton--discret .icone { rotate: 180deg; } .bouton--discret:hover .icone { transform: translateX(3px); } .courte { position: relative; isolation: isolate; overflow: clip; display: grid; align-items: center; min-height: calc(100svh - var(--barre) - 7rem); padding-block: clamp(3rem, 9vw, 7rem); } .courte::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--filet) 1px, transparent 1px), linear-gradient(90deg, var(--filet) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 15%, transparent 75%); opacity: .6; } .courte h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.035em; } .courte__code { margin-bottom: 1rem; font: 600 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-pale); } .courte__texte { margin: 1.1rem auto 0; max-width: 34rem; color: var(--fg-doux); font-size: 1.08rem; } .courte__actions { margin-top: 2rem; display: flex; justify-content: center; } /* ------------------------------------------- Écritures sans police du site (#4606) Les polices du site couvrent le latin et le cyrillique ; ailleurs, la police du système qui sait écrire la langue, nommée pour ne jamais tomber sur un carré vide. */ :root:lang(ar) { --ecriture: "Segoe UI", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma; } :root:lang(hi) { --ecriture: "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", "Mangal"; } :root:lang(zh) { --ecriture: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC"; } :root:lang(ja) { --ecriture: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP"; } :root:lang(ko) { --ecriture: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR"; } /* Ces écritures ne se resserrent pas : l'espacement négatif des titres casse la liaison de l'arabe et serre les idéogrammes. */ :root:is(:lang(ar), :lang(hi), :lang(zh), :lang(ja), :lang(ko)) :is(h1, h2, h3, h4, p, span, b, em, li, a, summary, label, legend, time, blockquote) { letter-spacing: normal; } :root:is(:lang(ar), :lang(hi)) :is(h1, h2, h3) { line-height: 1.35; } :root:lang(hi) body { line-height: 1.75; } :root:lang(ko) { word-break: keep-all; } :root:is(:lang(zh), :lang(ja)) { line-break: strict; } :root:is(:lang(zh), :lang(ja), :lang(ko)) .etape__heure, :root:is(:lang(zh), :lang(ja), :lang(ko)) .ecran__horloge { word-spacing: normal; } /* ------------------------------------------------------- De droite à gauche (#4606) La page se retourne par les propriétés logiques ; les décors animés qui se placent en pourcentages gardent leur mécanique et se retournent par symétrie, sans toucher au texte. */ [dir="rtl"] .bouton:not(.bouton--discret) .icone { scale: -1 1; } [dir="rtl"] .bouton:not(.bouton--discret):hover .icone { transform: translateX(-3px); } [dir="rtl"] .bouton--discret .icone { rotate: none; } [dir="rtl"] .bouton--discret:hover .icone { transform: translateX(-3px); } [dir="rtl"] .poste__grille { direction: ltr; } [dir="rtl"] .poste__grille .agent { direction: rtl; } [dir="rtl"] :is(.crans__piste, .interrupteur, .chantier__jauge) { scale: -1 1; } [dir="rtl"] .acces__un::after { scale: -1 1; } [dir="rtl"] .barres-semaines i { transform-origin: 100% 50%; } [dir="rtl"] .relais__trait::after { right: auto; left: -1px; rotate: -135deg; } [dir="rtl"] .relais__trait::before { animation-name: relais-rtl; } @keyframes relais-rtl { from { left: calc(100% - 8px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { left: 0; opacity: 0; } } @media (min-width: 1180px) and (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { [dir="rtl"] .poste { transform: rotateY(9deg) rotateX(4deg); animation-name: penche-rtl; } @keyframes penche-rtl { from { opacity: 0; transform: rotateY(22deg) rotateX(10deg) translateX(-40px) scale(.94); } to { opacity: 1; transform: rotateY(9deg) rotateX(4deg); } } [dir="rtl"] .scene-poste:hover .poste { transform: none; } } } .origine__nom em[lang] { white-space: nowrap; unicode-bidi: isolate; } :root:is(:lang(ja), :lang(zh)) :is(h1, h2, h3) { word-break: auto-phrase; } /* ------------------------------------------------------------------ Pages du référencement (#5451) */ /* Tarifs, questions, usages, métiers, comparatifs : la page texte de la vitrine, avec un fil d'Ariane, des cartes de formules, un tableau qui défile en largeur au téléphone et le plan du site au pied. */ .fil { margin-bottom: 1.6rem; font-size: .88rem; color: var(--fg-pale); } .fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; } .fil li + li::before { content: "/"; margin-inline-end: .35rem; color: var(--decor); } .fil :is(a, span) { color: var(--fg-doux); display: inline-block; padding-block: .6rem; } .fil span { color: var(--fg-pale); } .texte__tete--centre { text-align: center; } .texte__tete--centre .coche--tete { margin-inline: auto; } .texte__tete--centre :is(h1, .chapo) { margin-inline: auto; } .texte__tete--centre h1 { max-width: 22ch; } .texte .chapo { margin-top: 1.2rem; } .texte h2 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.25; letter-spacing: -.02em; } .texte__bloc--or { border-color: var(--or-filet); background: linear-gradient(var(--or-voile), var(--or-voile)), var(--surface); } .texte__bloc--or h2 { color: var(--chaud); } .texte__note { font-size: .88rem; color: var(--fg-pale); } .semaine li::before { background: var(--cyan); box-shadow: none; } .appels--gauche { justify-content: flex-start; } .bouton--suite .icone { display: none; } .texte__suite, .questions__tout { margin-top: 1.4rem; text-align: center; } .texte__suite a, .questions__tout a { display: inline-block; padding-block: .6rem; } .questions-page { margin-top: 2.6rem; } .questions-page h2 { margin-bottom: 1rem; } .voisines { margin-top: 3rem; } .voisines h2 { margin-bottom: .8rem; } .voisines ul { display: flex; flex-wrap: wrap; gap: .5rem; } .voisines a, .voisines__cartes a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--filet-fort); color: var(--fg); text-decoration: none; } .voisines a:hover { border-color: color-mix(in oklab, var(--violet) 55%, transparent); color: var(--fg-fort); } .voisines__cartes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; } .voisines__cartes a { padding: 0; border: 0; background: none; } .voisines__cartes .bouton { padding: .6rem 1.1rem; } /* Tarifs : l'interrupteur mensuel / annuel est un couple de boutons radio, lu par :has(). */ .tarifs { margin-top: 2.4rem; } .tarifs__periode-choix { position: absolute; opacity: 0; pointer-events: none; } .tarifs__periode { display: flex; width: fit-content; margin: 0 auto 1.8rem; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--filet-fort); } .tarifs__periode label { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1.1rem; border-radius: 999px; cursor: pointer; color: var(--fg-doux); font-weight: 500; text-align: center; } .tarifs:has(#periode-mois:checked) label[for="periode-mois"], .tarifs:has(#periode-an:checked) label[for="periode-an"] { background: color-mix(in oklab, var(--violet) 18%, transparent); color: var(--fg-fort); box-shadow: 0 0 0 1px var(--violet) inset; } .tarifs:has(.tarifs__periode-choix:focus-visible) .tarifs__periode { outline: 3px solid var(--vif); outline-offset: 3px; } .tarifs:has(#periode-mois:checked) .formule__prix--an, .tarifs:has(#periode-an:checked) .formule__prix--mois { display: none; } .tarifs__cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .formule { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.4rem, 3vw, 2rem); border-radius: 24px; background: var(--surface); border: 1px solid var(--filet); box-shadow: var(--ombre-douce); } .formule--pro { border-color: color-mix(in oklab, var(--violet) 45%, transparent); } .formule h3 { font-size: 1.5rem; letter-spacing: -.02em; } .formule__pour { color: var(--fg-doux); min-height: 3.2em; } .formule__prix b { font: 700 clamp(2.2rem, 1.6rem + 2vw, 2.9rem)/1 var(--titre); letter-spacing: -.03em; color: var(--fg-fort); } .formule__prix span { color: var(--fg-pale); font-size: .95rem; } .formule__capacites { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--filet); flex: 1; } .formule__capacites div { display: flex; justify-content: space-between; gap: 1rem; } .formule__capacites dt { color: var(--fg-doux); } .formule__capacites dd { margin: 0; font-weight: 600; color: var(--fg-fort); } .tarifs__ouverture { margin-top: 1.6rem; text-align: center; font-weight: 600; color: var(--chaud); } .tarifs__taxes { margin-top: .4rem; text-align: center; font-size: .9rem; color: var(--fg-pale); } .tarifs__suite, .comparatifs__suite { margin: 3rem auto 0; } @media (max-width: 900px) { .tarifs__cartes { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; } .formule__pour { min-height: 0; } } /* Comparatifs : le tableau défile en largeur sous 900 px, la colonne Lastnod marquée. */ .comparaison { margin-top: 2.4rem; overflow-x: auto; border-radius: 22px; border: 1px solid var(--filet); background: var(--surface); box-shadow: var(--ombre-douce); } .comparaison table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .95rem; } .comparaison :is(th, td) { padding: .9rem 1rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--filet); } .comparaison tr:last-child :is(th, td) { border-bottom: 0; } .comparaison thead th { font: 600 1rem/1.3 var(--titre); color: var(--fg-fort); } .comparaison tbody th { font-weight: 600; color: var(--fg-fort); width: 14rem; } /* La colonne des critères reste en place quand le tableau défile en largeur. */ .comparaison :is(tbody th, thead td) { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); } @media (max-width: 760px) { .comparaison table { min-width: 620px; font-size: .9rem; } .comparaison tbody th { width: 7.5rem; } .comparaison :is(th, td) { padding: .75rem .7rem; } } .comparaison__nous { background: color-mix(in oklab, var(--violet) 8%, transparent); } .sources { margin-top: 2.4rem; display: flex; flex-direction: column; gap: .6rem; font-size: .88rem; color: var(--fg-pale); } .sources__titre { font-weight: 600; color: var(--fg-doux); } .sources ul { display: flex; flex-direction: column; } .sources a { display: inline-block; padding-block: .55rem; color: var(--fg-doux); overflow-wrap: anywhere; } /* Le plan du site au pied de chaque page. */ .pied__plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--filet); } .pied__titre { margin-bottom: .4rem; font-weight: 600; color: var(--fg-doux); } .pied__plan a { display: inline-block; padding-block: .6rem; text-decoration: none; } .pied__plan a:hover { text-decoration: underline; } @media (max-width: 760px) { .pied__plan { grid-template-columns: minmax(0, 1fr); } }