/* jamelbaz.com : thème du site, chargé après Bootstrap 5.3.3. Couleurs tirées de la mascotte : bleu nuit (fond du cercle), turquoise (polo), sable (chapeau). */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-wght-normal.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; } /* L'écriture à la main du bloc « Sur mesure » : Caveat 600 (SIL Open Font License 1.1), réduite aux caractères du français par docs/outils/sous_ensemble_police.js (19 Ko). Elle n'est chargée que sur les pages qui ont ce bloc. */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/caveat-600-fr.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2013-2014, U+2019, U+2026, U+202F; } :root { --jb-bleu: #043581; --jb-bleu-fonce: #032a66; --jb-turquoise: #029fa7; /* accents : points, filets, grands chiffres */ --jb-turquoise-texte: #037d84; /* turquoise assez foncé pour le petit texte (contraste 4,9:1) */ --jb-turquoise-clair: #e6f6f7; --jb-sable: #dfa97b; --jb-sable-clair: #f8ede3; --jb-encre: #0f1a2e; --jb-texte: #3b4a5f; --jb-gris: #f4f6f9; --jb-ligne: #e6eaf0; --jb-crm: #4361ee; /* bleu des CRM, pour les morceaux de logiciels */ --jb-crm-clair: #eef0fd; --jb-vert: #15803d; --jb-rayon: 14px; --jb-ombre: 0 14px 34px rgba(15, 26, 46, .10); --jb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* code (page Dolibarr), sans police à télécharger */ --ink-noir: #1d2433; /* les quatre encres de l'impression (page InkCRM) */ --ink-cyan: #0aa5d8; --ink-magenta: #d63384; --ink-jaune: #f2c230; --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --bs-body-color: var(--jb-encre); --bs-body-color-rgb: 15, 26, 46; --bs-link-color: var(--jb-bleu); --bs-link-color-rgb: 4, 53, 129; --bs-link-hover-color: var(--jb-bleu-fonce); --bs-link-hover-color-rgb: 3, 42, 102; --bs-border-color: var(--jb-ligne); } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; } [id] { scroll-margin-top: 90px; } :focus-visible { outline: 2px solid var(--jb-bleu); outline-offset: 2px; } .ico { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex: none; } /* Lien d'évitement, visible seulement au clavier */ .lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; padding: .6rem 1rem; border-radius: 8px; font-weight: 600; } .lien-evitement:focus { left: 1rem; top: 1rem; } /* ---------- Boutons ---------- */ .btn-jb, .btn-jb-ligne, .btn-jb-blanc, .btn-jb-contour { display: inline-flex; align-items: center; gap: .55rem; border-radius: 10px; padding: .8rem 1.35rem; font-weight: 600; } .btn-jb { --bs-btn-color: #fff; --bs-btn-bg: var(--jb-bleu); --bs-btn-border-color: var(--jb-bleu); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--jb-bleu-fonce); --bs-btn-hover-border-color: var(--jb-bleu-fonce); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--jb-bleu-fonce); --bs-btn-active-border-color: var(--jb-bleu-fonce); --bs-btn-focus-shadow-rgb: 4, 53, 129; } .btn-jb-ligne { --bs-btn-color: var(--jb-encre); --bs-btn-bg: #fff; --bs-btn-border-color: #d3d9e3; --bs-btn-hover-color: var(--jb-bleu); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: var(--jb-bleu); --bs-btn-active-color: var(--jb-bleu); --bs-btn-active-bg: #fff; --bs-btn-active-border-color: var(--jb-bleu); --bs-btn-focus-shadow-rgb: 4, 53, 129; --bs-btn-border-width: 1.5px; } /* Sur fond bleu nuit : bouton blanc, et bouton en simple contour */ .btn-jb-blanc { --bs-btn-color: var(--jb-bleu); --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-color: var(--jb-bleu-fonce); --bs-btn-hover-bg: #e9f1fb; --bs-btn-hover-border-color: #e9f1fb; --bs-btn-active-color: var(--jb-bleu-fonce); --bs-btn-active-bg: #e9f1fb; --bs-btn-active-border-color: #e9f1fb; --bs-btn-focus-shadow-rgb: 255, 255, 255; } .btn-jb-contour { --bs-btn-color: #fff; --bs-btn-bg: transparent; --bs-btn-border-color: rgba(255, 255, 255, .45); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .1); --bs-btn-hover-border-color: #fff; --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .14); --bs-btn-active-border-color: #fff; --bs-btn-focus-shadow-rgb: 255, 255, 255; --bs-btn-border-width: 1.5px; } /* ---------- Barre de menu ---------- */ .barre { background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--jb-ligne); transition: box-shadow .2s ease; } .barre.defile { box-shadow: 0 6px 20px rgba(15, 26, 46, .06); } .barre .navbar { padding: .8rem 0; --bs-navbar-color: var(--jb-encre); --bs-navbar-hover-color: var(--jb-bleu); --bs-navbar-active-color: var(--jb-bleu); --bs-navbar-nav-link-padding-x: .9rem; --bs-navbar-toggler-border-color: transparent; } .barre .nav-link { font-weight: 500; } .barre .navbar-toggler:focus { box-shadow: none; } .marque { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; color: var(--jb-bleu); text-decoration: none; } .marque:hover { color: var(--jb-bleu); } .marque img { border-radius: 50%; } .menu-logiciels { --bs-dropdown-min-width: 300px; padding: .5rem; border: 1px solid var(--jb-ligne); border-radius: var(--jb-rayon); box-shadow: var(--jb-ombre); } .menu-logiciels .dropdown-item { display: flex; align-items: center; gap: .8rem; border-radius: 10px; padding: .55rem .7rem; white-space: normal; } .menu-logiciels .dropdown-item .ico { font-size: 1.15rem; color: var(--jb-turquoise-texte); } .menu-logiciels .dropdown-item b { display: block; font-weight: 600; font-size: .95rem; } .menu-logiciels .dropdown-item small { display: block; color: var(--jb-texte); font-size: .8rem; } .menu-logiciels .dropdown-item:hover, .menu-logiciels .dropdown-item:focus { background: var(--jb-gris); color: var(--jb-encre); } @media (max-width: 991.98px) { .barre .navbar-collapse { padding: .75rem 0 .5rem; } .barre .navbar-collapse .btn-jb { margin: .5rem 0; } .menu-logiciels { box-shadow: none; border: 0; padding: 0 0 .5rem; } } /* ---------- Titres et textes ---------- */ .surtitre { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--jb-turquoise-texte); margin-bottom: .9rem; } .point { color: var(--jb-turquoise); } .sans-coupure { white-space: nowrap; } /* le dernier mot d'un titre et son point (posé par typographie() dans inc/site.php) */ .titre-hero { font-weight: 800; font-size: clamp(2.4rem, 4.3vw, 3.6rem); line-height: 1.05; letter-spacing: -.035em; color: var(--jb-bleu); margin-bottom: 1.4rem; } .titre-section { font-weight: 800; font-size: clamp(1.9rem, 3.1vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; color: var(--jb-bleu); margin-bottom: 1rem; } .filet { display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--jb-turquoise); margin-bottom: 1.4rem; } .hero-intro, .section-intro { font-size: 1.15rem; line-height: 1.55; color: var(--jb-texte); max-width: 34rem; } .hero-intro strong { font-weight: 600; color: var(--jb-encre); } /* une preuve dans l'accroche (« Depuis 2015 », page InkCRM) */ /* ---------- Accueil : en-tête de page ---------- */ .hero { padding: 2.5rem 0 1rem; overflow: hidden; } .hero-grille { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "scene" "benefices"; row-gap: 1.25rem; } .hero-texte { grid-area: texte; } .scene { grid-area: scene; } .benefices { grid-area: benefices; } .hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; } .benefices { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; } .benefices li { display: flex; align-items: center; gap: .9rem; color: var(--jb-texte); font-size: .95rem; } .benefices b { display: block; color: var(--jb-encre); font-size: 1rem; } .pastille { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 1.15rem; } .pastille-turquoise { background: var(--jb-turquoise-clair); color: var(--jb-turquoise-texte); } .pastille-crm { background: var(--jb-crm-clair); color: var(--jb-crm); } /* La scène : la mascotte (retournée pour regarder l'accroche) présente ses métiers. Cinq médaillons sur une orbite, comme le cercle du logo ; le CRM au centre, à portée de sa main. Tout se règle avec trois variables : --h (hauteur de la mascotte), --r (écart au bord droit), --t (écart en haut). Repères mesurés sur l'image : largeur = --h × 0,4975 ; centre du corps à 31,5 % de la largeur depuis la droite ; main ouverte vers 38 % de la hauteur. L'orbite est centrée sur le corps, à hauteur de la main, rayon = --h × 0,43. */ .scene { --h: 480px; --r: 0px; --t: 30px; --m: calc(var(--h) * .13); --m-centre: calc(var(--h) * .16); position: relative; width: 100%; max-width: 420px; margin-inline: auto; height: calc(var(--t) + var(--h) * .86 + 10px); overflow: hidden; overflow-x: visible; overflow-y: clip; /* coupe en bas (mi-cuisse), laisse l'orbite filer jusqu'au bord de l'écran */ } .mascotte { position: absolute; top: var(--t); right: var(--r); height: var(--h); width: auto; z-index: 2; /* retournée ; --px / --py viennent de site.js (la scène suit un peu la souris) */ transform: scaleX(-1) translate(calc(var(--px, 0) * -6px), calc(var(--py, 0) * 4px)); transition: transform .9s cubic-bezier(.2, .8, .2, 1); } .sol { display: none; } .orbite { position: absolute; width: calc(var(--h) * .86); height: calc(var(--h) * .86); top: calc(var(--t) - var(--h) * .05); right: calc(var(--r) - var(--h) * .2733); translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -10px); /* sens opposé à la mascotte : profondeur */ transition: translate .9s cubic-bezier(.2, .8, .2, 1); } .orbite::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(2, 159, 167, .10), rgba(4, 53, 129, .04) 65%, transparent); } .anneaux { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; } .anneaux circle { fill: none; } .anneau { stroke: #d8e2ed; stroke-width: .28; } .arc { stroke: var(--jb-turquoise); stroke-width: .5; stroke-linecap: round; stroke-dasharray: 33.33 66.67; stroke-dashoffset: -33.33; } /* Médaillons : positions sur l'orbite (angles 120°, 150°, 180°, 210° et 240°) */ .medaillon { position: absolute; z-index: 3; width: var(--m); height: var(--m); transform: translate(-50%, -50%); } .m-haut { left: 25%; top: 6.7%; } .m-haut-milieu { left: 6.7%; top: 25%; } .m-centre { left: 0; top: 50%; width: var(--m-centre); height: var(--m-centre); } .m-bas-milieu { left: 6.7%; top: 75%; } .m-bas { left: 25%; top: 93.3%; } .medaillon-disque { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--jb-ligne); box-shadow: 0 16px 34px rgba(15, 26, 46, .13), inset 0 0 0 5px #fff, inset 0 0 0 100px #f5f8fc; } .medaillon-disque svg { width: 62%; height: 62%; } .m-centre .medaillon-disque { border: 2px solid var(--jb-bleu); box-shadow: 0 18px 40px rgba(4, 53, 129, .22), inset 0 0 0 5px #fff, inset 0 0 0 100px #f5f8fc; } .medaillon-nom { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); white-space: nowrap; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 999px; padding: .1rem .55rem; font-size: .68rem; font-weight: 600; color: var(--jb-encre); box-shadow: 0 4px 10px rgba(15, 26, 46, .08); } .m-centre .medaillon-nom { background: var(--jb-bleu); border-color: var(--jb-bleu); color: #fff; } /* Apparition : la mascotte monte, l'orbite se dessine, les médaillons s'ouvrent depuis sa main. Tout est en place à 1,3 s. */ @keyframes jb-monte { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } } @keyframes jb-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes jb-arc { from { stroke-dasharray: 0 100; opacity: 0; } 15% { opacity: 1; } to { stroke-dasharray: 33.33 66.67; opacity: 1; } } @keyframes jb-ouvre { 0% { opacity: 0; scale: .35; } 65% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } } @keyframes jb-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } } .mascotte { animation: jb-monte .75s cubic-bezier(.2, .8, .2, 1) .05s both; } .anneau { stroke-dasharray: 100; animation: jb-trace 1s cubic-bezier(.4, 0, .2, 1) .15s both; } .arc { animation: jb-arc .6s ease-out .7s both; } .medaillon { animation: jb-ouvre .5s cubic-bezier(.2, .9, .3, 1.2) both; } .m-centre { animation-delay: .35s; } .m-haut-milieu, .m-bas-milieu { animation-delay: .55s; } .m-haut, .m-bas { animation-delay: .75s; } .medaillon-disque { animation: jb-flotte 7s ease-in-out 1.6s infinite; } .m-haut-milieu .medaillon-disque, .m-bas .medaillon-disque { animation-delay: 2.4s; } .m-centre .medaillon-disque { animation-duration: 8s; } /* Deux petits satellites tournent lentement sur l'orbite et passent derrière la mascotte */ @keyframes jb-tourne { to { rotate: 360deg; } } @keyframes jb-apparait { from { opacity: 0; } to { opacity: 1; } } .satellite { position: absolute; inset: .4%; border-radius: 50%; z-index: 1; pointer-events: none; } .satellite::before { content: ''; position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; } .satellite-turquoise { animation: jb-tourne 40s linear infinite, jb-apparait .8s ease 1.3s both; } .satellite-turquoise::before { background: var(--jb-turquoise); box-shadow: 0 0 0 5px rgba(2, 159, 167, .16); } .satellite-sable { animation: jb-tourne 60s linear -25s infinite reverse, jb-apparait .8s ease 1.5s both; } .satellite-sable::before { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--jb-sable); box-shadow: 0 0 0 4px rgba(223, 169, 123, .22); } /* Les médaillons se soulèvent au survol */ .medaillon-disque { transition: scale .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .35s ease; } .medaillon:hover .medaillon-disque { scale: 1.08; box-shadow: 0 22px 44px rgba(15, 26, 46, .18), inset 0 0 0 5px #fff, inset 0 0 0 100px #f5f8fc; } /* ---------- Accueil : le texte s'anime au chargement, en même temps que la scène ---------- */ @keyframes jb-surtitre { from { opacity: 0; letter-spacing: .45em; } to { opacity: 1; letter-spacing: .12em; } } @keyframes jb-mot { from { translate: 0 110%; } to { translate: 0 0; } } @keyframes jb-point { 0% { scale: 0; } 70% { scale: 1.45; } 100% { scale: 1; } } @keyframes jb-filet { from { scale: 0 1; } to { scale: 1 1; } } @keyframes jb-leve { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } } @keyframes jb-glisse { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } } @keyframes jb-brille { from { translate: -130% 0; } to { translate: 130% 0; } } .hero .surtitre { animation: jb-surtitre .9s cubic-bezier(.2, .8, .2, 1) .05s both; } /* Chaque mot du grand titre monte depuis un masque, l'un après l'autre */ .titre-hero .mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; } .titre-hero .mot > span { display: inline-block; animation: jb-mot .8s cubic-bezier(.2, .8, .2, 1) both; } .titre-hero .mot:nth-child(1) > span { animation-delay: .15s; } .titre-hero .mot:nth-child(2) > span { animation-delay: .205s; } .titre-hero .mot:nth-child(3) > span { animation-delay: .26s; } .titre-hero .mot:nth-child(4) > span { animation-delay: .315s; } .titre-hero .mot:nth-child(5) > span { animation-delay: .37s; } .titre-hero .mot:nth-child(6) > span { animation-delay: .425s; } .titre-hero .mot:nth-child(7) > span { animation-delay: .48s; } .titre-hero .mot:nth-child(8) > span { animation-delay: .535s; } .titre-hero .mot:nth-child(9) > span { animation-delay: .59s; } .titre-hero .mot:nth-child(n+10) > span { animation-delay: .645s; } .titre-hero .point { display: inline-block; animation: jb-point .5s cubic-bezier(.3, 1.4, .5, 1) 1.05s both; } .hero .filet { transform-origin: left center; animation: jb-filet .7s cubic-bezier(.2, .8, .2, 1) .8s both; } .hero-intro { animation: jb-leve .7s cubic-bezier(.2, .8, .2, 1) .85s both; } .hero-actions { animation: jb-leve .7s cubic-bezier(.2, .8, .2, 1) .95s both; } .benefices li { animation: jb-glisse .6s cubic-bezier(.2, .8, .2, 1) both; } .benefices li:nth-child(1) { animation-delay: 1.05s; } .benefices li:nth-child(2) { animation-delay: 1.13s; } .benefices li:nth-child(3) { animation-delay: 1.21s; } /* Reflet sur le bouton principal : une fois après l'arrivée (::before), puis à chaque survol (::after) */ .brille { position: relative; overflow: hidden; } .brille::before, .brille::after { content: ''; position: absolute; inset: 0; pointer-events: none; translate: -130% 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); } .btn-jb-blanc.brille::before, .btn-jb-blanc.brille::after { background: linear-gradient(110deg, transparent 30%, rgba(4, 53, 129, .14) 50%, transparent 70%); } .brille::before { animation: jb-brille 1.1s ease 1.8s both; } .brille:hover::after { translate: 130% 0; transition: translate .9s ease; } /* Tablette et plus : la mascotte en pied, plus grande */ @media (min-width: 576px) { .medaillon-nom { font-size: .72rem; padding: .12rem .6rem; } } @media (min-width: 768px) { .benefices { grid-template-columns: repeat(3, minmax(0, 1fr)); } .scene { --h: 560px; --r: 40px; --t: 40px; --m: calc(var(--h) * .155); --m-centre: calc(var(--h) * .19); max-width: 620px; height: calc(var(--h) + var(--t)); overflow: visible; } .sol { display: block; position: absolute; bottom: -10px; right: calc(var(--r) + var(--h) * .07); width: calc(var(--h) * .37); height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(4, 53, 129, .16), transparent); z-index: 1; } } /* Ordinateur : deux colonnes, l'accroche à gauche, la scène à droite */ @media (min-width: 992px) { .hero { padding: 4rem 0 3rem; } .hero-grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "texte scene" "benefices scene"; column-gap: 2.5rem; row-gap: 2.5rem; } .hero-texte { align-self: end; } .benefices { grid-template-columns: minmax(0, 1fr); align-self: start; } .scene { --h: 520px; --r: 10px; max-width: none; } } @media (min-width: 1200px) { .scene { --h: 590px; --r: 20px; } } @media (min-width: 1400px) { .scene { --h: 650px; --r: 40px; } } /* ---------- Sections ---------- */ .section { padding: 4.5rem 0; } .section-grise { background: var(--jb-gris); } .section-tete { max-width: 42rem; margin-bottom: 2.5rem; } .etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; } .etapes li { position: relative; padding-top: 1.25rem; } .etapes li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--jb-ligne); } .etapes li::after { content: ''; position: absolute; top: 0; left: 0; width: 56px; height: 2px; background: var(--jb-turquoise); transform-origin: left center; } .etapes .num { display: block; font-weight: 800; font-size: 2.2rem; line-height: 1; letter-spacing: -.03em; color: var(--jb-turquoise); margin-bottom: .8rem; } .etapes h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .45rem; } .etapes p { color: var(--jb-texte); margin: 0; } @media (min-width: 768px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } } /* Cartes des logiciels */ .carte-logiciel { position: relative; height: 100%; display: flex; flex-direction: column; gap: 1rem; background: #fff; border: 1px solid var(--jb-ligne); border-radius: var(--jb-rayon); padding: 1.4rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .carte-logiciel:hover, .carte-logiciel:focus-within { transform: translateY(-3px); box-shadow: var(--jb-ombre); border-color: #d6dde8; } .carte-corps { flex: 1; display: flex; flex-direction: column; } .carte-metier { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--jb-texte); margin-bottom: .3rem; } .carte-logiciel h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; } .carte-logiciel h3 a { color: var(--jb-encre); text-decoration: none; } .carte-texte { color: var(--jb-texte); font-size: .93rem; margin-bottom: 1rem; } .carte-lien { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .9rem; color: var(--jb-bleu); } /* Au survol d'une carte : l'icône pivote, la flèche avance */ .carte-logiciel .pastille, .carte-lien .ico { transition: scale .3s cubic-bezier(.3, 1.5, .5, 1), rotate .3s ease, translate .25s ease; } .carte-logiciel:hover .pastille { scale: 1.12; rotate: -8deg; } .carte-logiciel:hover .carte-lien .ico { translate: 4px 0; } .carte-socle { border-color: var(--jb-sable); } .badge-socle, .badge-sable { position: absolute; top: 1.4rem; right: 1.4rem; background: var(--jb-sable-clair); color: #8a5a2b; font-size: .72rem; font-weight: 700; letter-spacing: 0; text-transform: none; border-radius: 999px; padding: .2rem .65rem; } .sur-mesure-ligne { margin: 2rem 0 0; color: var(--jb-texte); } .sur-mesure-ligne .ico { color: var(--jb-turquoise-texte); margin-right: .45rem; } .sur-mesure-ligne a { font-weight: 600; } /* Téléphone : cartes compactes sur une ligne (icône, métier, nom, flèche) ; la description est sur la page du logiciel */ @media (max-width: 575.98px) { .carte-logiciel { flex-direction: row; align-items: center; gap: .9rem; padding: .9rem 1rem; } .carte-corps { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; align-items: center; } .carte-metier { grid-column: 1; margin: 0; } .carte-logiciel h3 { grid-column: 1; margin: 0; font-size: 1.05rem; } .carte-texte, .carte-lien-texte { display: none; } .carte-lien { grid-column: 2; grid-row: 1 / span 2; margin: 0; } .badge-socle { position: static; display: inline-block; margin-left: .35rem; padding: .05rem .5rem; } } /* Preuves, sur fond bleu nuit */ .section-bleue { background: var(--jb-bleu); color: #fff; } .preuve > .ico { font-size: 1.7rem; color: #7fd6db; margin-bottom: 1rem; } .preuve-titre { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: .45rem; } .section-bleue p { color: rgba(255, 255, 255, .84); margin: 0; } .section-bleue p.preuve-titre { color: #fff; margin-bottom: .45rem; } .section-bleue a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--jb-sable); text-underline-offset: 3px; white-space: nowrap; } /* Contact */ .mascotte-contact { height: 320px; width: auto; } @media (min-width: 992px) { .mascotte-contact { height: 420px; } } .contact-liens { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.8rem 0 1.2rem; } .contact-lieu { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--jb-texte); } /* ---------- Apparition des blocs au défilement (js/site.js) ---------- site.js ne cache que les blocs encore sous l'écran au chargement, puis les révèle une seule fois. Sans JavaScript, ou si le visiteur a coupé les animations, tout reste simplement visible. */ .titre-section .point { display: inline-block; } .etapes li:nth-child(2), .preuve:nth-child(2) { --delai: .12s; } .etapes li:nth-child(3), .preuve:nth-child(3) { --delai: .24s; } .etapes li:nth-child(4) { --delai: .36s; } .grille-logiciels > .col:nth-child(4n+2) { --delai: .08s; } .grille-logiciels > .col:nth-child(4n+3) { --delai: .16s; } .grille-logiciels > .col:nth-child(4n+4) { --delai: .24s; } .contact-texte { --delai: .12s; } .a-apparaitre { opacity: 0; translate: 0 28px; transition: opacity .7s ease var(--delai, 0s), translate .8s cubic-bezier(.2, .8, .2, 1) var(--delai, 0s), scale .8s cubic-bezier(.2, .8, .2, 1) var(--delai, 0s); } .a-apparaitre[data-apparition="gauche"] { translate: -32px 0; } .a-apparaitre[data-apparition="zoom"] { translate: 0 14px; scale: .94; } /* « chaine », « famille », « code » et « compat » : le conteneur reste en place, ce sont ses éléments qui s'animent */ .a-apparaitre[data-apparition="chaine"], .a-apparaitre[data-apparition="famille"], .a-apparaitre[data-apparition="code"], .a-apparaitre[data-apparition="compat"] { opacity: 1; translate: none; } .a-apparaitre.apparu { opacity: 1; translate: 0 0; scale: 1; } /* Le point turquoise des titres arrive en dernier, d'un petit rebond */ .a-apparaitre .point { scale: 0; transition: scale .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--delai, 0s) + .45s); } .a-apparaitre.apparu .point { scale: 1; } /* Étapes : le trait turquoise se dessine au-dessus de chaque étape */ .etapes li.a-apparaitre::after { scale: 0 1; transition: scale .7s cubic-bezier(.2, .8, .2, 1) calc(var(--delai, 0s) + .25s); } .etapes li.a-apparaitre.apparu::after { scale: 1 1; } /* Preuves : les icônes s'ouvrent */ .preuve.a-apparaitre > .ico { opacity: 0; scale: .5; transition: opacity .4s ease calc(var(--delai, 0s) + .2s), scale .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--delai, 0s) + .2s); } .preuve.a-apparaitre.apparu > .ico { opacity: 1; scale: 1; } @media print { .a-apparaitre, .a-apparaitre .point, .preuve.a-apparaitre > .ico { opacity: 1 !important; translate: none !important; scale: 1 !important; } } /* ==================== Pages des logiciels ==================== */ /* Fil d'Ariane */ .fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .82rem; color: var(--jb-texte); margin-bottom: 1.6rem; } .fil-ariane a { color: var(--jb-texte); text-decoration: none; } .fil-ariane a:hover { color: var(--jb-bleu); text-decoration: underline; } .fil-ariane .ico { font-size: .65rem; opacity: .55; } .fil-ariane [aria-current] { color: var(--jb-encre); font-weight: 600; } /* En-tête du produit : le texte (mêmes animations que l'accueil) et la fenêtre du logiciel */ .hero-produit { padding-top: 1.75rem; } .produit-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; } @media (min-width: 992px) { .produit-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; } } .produit-grille .hero-texte { grid-area: auto; align-self: center; } /* annule le placement de l'accueil (zone « texte ») */ .titre-produit { font-size: clamp(2.1rem, 3.7vw, 3.15rem); } .titre-produit .point { animation-delay: 1.35s; } .surtitre .badge-socle, .surtitre .badge-sable { position: static; display: inline-block; margin-left: .45rem; vertical-align: 1px; } .publics { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; animation: jb-leve .7s cubic-bezier(.2, .8, .2, 1) .9s both; } .publics li { font-size: .8rem; font-weight: 600; color: var(--jb-bleu); background: #eef3fb; border-radius: 999px; padding: .3rem .8rem; } .hero-produit .hero-actions { animation-delay: 1.05s; } /* La fenêtre du logiciel, dessinée (données de démo) */ .fenetre-zone { position: relative; animation: jb-monte .8s cubic-bezier(.2, .8, .2, 1) .15s both; } .fenetre { background: #fff; border: 1px solid var(--jb-ligne); border-radius: 18px; overflow: hidden; box-shadow: 0 32px 64px rgba(15, 26, 46, .16), 0 2px 6px rgba(15, 26, 46, .05); } .fenetre-barre { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f7f9fc; border-bottom: 1px solid var(--jb-ligne); } .fenetre-barre i { width: 10px; height: 10px; border-radius: 50%; background: var(--jb-sable); } .fenetre-barre i:nth-child(2) { background: var(--jb-turquoise); } .fenetre-barre i:nth-child(3) { background: var(--jb-bleu); } .fenetre-barre b { margin-left: 8px; font-size: .78rem; font-weight: 600; color: var(--jb-texte); } .fenetre-corps { display: grid; grid-template-columns: 46px minmax(0, 1fr); } .fenetre-menu { background: #0f1524; padding: 12px 6px; display: flex; flex-direction: column; gap: 4px; } .fm { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; color: #9fa7b5; font-size: .78rem; white-space: nowrap; animation: jb-glisse .5s cubic-bezier(.2, .8, .2, 1) both; } .fm .ico { font-size: .95rem; } .fm > span { display: none; } .fm.actif { background: rgba(67, 97, 238, .24); color: #fff; } .fm.actif .ico { color: #9db0ff; } .fm:nth-child(1) { animation-delay: .5s; } .fm:nth-child(2) { animation-delay: .58s; } .fm:nth-child(3) { animation-delay: .66s; } .fm:nth-child(4) { animation-delay: .74s; } .fm:nth-child(5) { animation-delay: .82s; } .fm:nth-child(6) { animation-delay: .9s; } @media (min-width: 576px) { .fenetre-corps { grid-template-columns: 150px minmax(0, 1fr); } .fenetre-menu { padding: 14px 10px; } .fm > span { display: inline; } } .fenetre-contenu { background: #f5f7fb; padding: 14px; display: grid; gap: 12px; align-content: start; } .tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .tuile { background: #fff; border: 1px solid var(--jb-ligne); border-radius: 10px; padding: 9px 11px; } .tuile small { display: block; font-size: .64rem; line-height: 1.3; color: var(--jb-texte); } @media (min-width: 576px) { .tuile small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .tuile b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--jb-encre); } .graphe { background: #fff; border: 1px solid var(--jb-ligne); border-radius: 10px; padding: 10px 12px 8px; } .graphe-tete { display: flex; justify-content: space-between; font-size: .72rem; color: var(--jb-texte); margin-bottom: 4px; } .graphe-tete b { color: var(--jb-encre); font-weight: 600; } .graphe svg { display: block; width: 100%; height: auto; overflow: visible; } .graphe .aire { fill: rgba(67, 97, 238, .10); animation: jb-apparait .8s ease 1.3s both; } .graphe .ligne { fill: none; stroke: var(--jb-crm); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: jb-trace-ligne 1.2s cubic-bezier(.4, 0, .2, 1) .75s both; } .graphe .point-graphe { fill: #fff; stroke: var(--jb-crm); stroke-width: 2.6; transform-box: fill-box; transform-origin: center; animation: jb-ouvre .4s ease 1.85s both; } @keyframes jb-trace-ligne { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } .docs { background: #fff; border: 1px solid var(--jb-ligne); border-radius: 10px; overflow: hidden; } .doc { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; font-size: .74rem; border-top: 1px solid var(--jb-ligne); animation: jb-leve .5s ease both; } .doc:first-child { border-top: 0; animation-delay: 1s; } .doc:nth-child(2) { animation-delay: 1.1s; } .doc:nth-child(3) { animation-delay: 1.2s; } .doc span:first-child { font-weight: 600; color: var(--jb-encre); } .doc span:nth-child(2) { color: var(--jb-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .etat { font-size: .66rem; font-weight: 700; border-radius: 999px; padding: .12rem .55rem; } .etat-payee { background: #ecfdf3; color: var(--jb-vert); } .etat-envoye { background: var(--jb-crm-clair); color: var(--jb-crm); } .etat-cours { background: #fff7ed; color: #b45309; } .pastille-flottante { position: absolute; right: 12px; bottom: -16px; z-index: 2; display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 999px; padding: .5rem .95rem; font-size: .8rem; font-weight: 600; box-shadow: 0 14px 30px rgba(15, 26, 46, .14); animation: jb-ouvre .5s cubic-bezier(.2, .9, .3, 1.2) 1.8s both, jb-flotte 6s ease-in-out 2.4s infinite; } .pastille-flottante .ico { color: var(--jb-vert); font-size: 1rem; } @media (min-width: 992px) { .pastille-flottante { right: -18px; bottom: auto; top: 44%; } } /* Les chiffres des tuiles comptent jusqu'à leur valeur (CSS seul ; sans @property, la valeur finale s'affiche) */ @property --n { syntax: ''; inherits: false; initial-value: 0; } @keyframes jb-compte { from { --n: 0; } } .compteur { counter-reset: n var(--n); animation: jb-compte 1.6s cubic-bezier(.2, .8, .2, 1) .7s both; } .compteur::after { content: counter(n); } .c-devis { --n: 18; } .c-commandes { --n: 37; } .c-payees { --n: 94; } .c-payees::after { content: counter(n) "\00a0%"; } /* Trois promesses */ .promesses { display: grid; gap: 1.5rem; } @media (min-width: 768px) { .promesses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } } .promesse { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; } .promesse h3 { font-size: 1.15rem; font-weight: 700; margin: .2rem 0 0; } .promesse p { color: var(--jb-texte); margin: 0; } .promesse:nth-child(2) { --delai: .12s; } .promesse:nth-child(3) { --delai: .24s; } /* La chaîne commerciale : à la verticale sur téléphone, en frise sur ordinateur ; la ligne se dessine au défilement */ .chaine { --rond: 56px; list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: 1.3rem; } .chaine::before, .chaine::after { content: ''; position: absolute; left: calc(var(--rond) / 2 - 1px); top: calc(var(--rond) / 2); bottom: calc(var(--rond) / 2); width: 2px; background: var(--jb-ligne); } .chaine::after { background: var(--jb-turquoise); transform-origin: center top; } .chaine li { position: relative; z-index: 1; display: grid; grid-template-columns: var(--rond) minmax(0, 1fr); column-gap: 1rem; align-items: center; } .chaine .rond { grid-row: span 2; width: var(--rond); height: var(--rond); border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--jb-turquoise); color: var(--jb-bleu); font-size: 1.3rem; box-shadow: 0 8px 18px rgba(15, 26, 46, .08); } .chaine b { align-self: end; font-weight: 700; } .chaine li > span:last-child { align-self: start; color: var(--jb-texte); font-size: .9rem; } @media (min-width: 992px) { .chaine { --rond: 64px; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .75rem; } .chaine::before, .chaine::after { left: calc(100% / 14); right: calc(100% / 14); top: calc(var(--rond) / 2 - 1px); bottom: auto; width: auto; height: 2px; } .chaine::after { transform-origin: left center; } .chaine li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; } .chaine b, .chaine li > span:last-child { align-self: center; } .chaine .rond { margin-bottom: .6rem; } .chaine li > span:last-child { font-size: .85rem; } } .chaine.a-apparaitre::after { scale: 1 0; transition: scale 1.5s cubic-bezier(.4, 0, .2, 1) .15s; } .chaine.a-apparaitre li { opacity: 0; translate: 0 12px; transition: opacity .5s ease var(--delai, 0s), translate .6s cubic-bezier(.2, .8, .2, 1) var(--delai, 0s); } .chaine.a-apparaitre .rond { border-color: var(--jb-ligne); transition: border-color .4s ease calc(var(--delai, 0s) + .15s); } .chaine.a-apparaitre.apparu::after { scale: 1 1; } .chaine.a-apparaitre.apparu li { opacity: 1; translate: 0 0; } .chaine.a-apparaitre.apparu .rond { border-color: var(--jb-turquoise); } @media (min-width: 992px) { .chaine.a-apparaitre::after { scale: 0 1; } .chaine.a-apparaitre.apparu::after { scale: 1 1; } } .chaine li:nth-child(1) { --delai: .15s; } .chaine li:nth-child(2) { --delai: .35s; } .chaine li:nth-child(3) { --delai: .55s; } .chaine li:nth-child(4) { --delai: .75s; } .chaine li:nth-child(5) { --delai: .95s; } .chaine li:nth-child(6) { --delai: 1.15s; } .chaine li:nth-child(7) { --delai: 1.35s; } /* Les modules */ .carte-module { height: 100%; background: #fff; border: 1px solid var(--jb-ligne); border-radius: var(--jb-rayon); padding: 1.25rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .carte-module:hover { transform: translateY(-3px); box-shadow: var(--jb-ombre); border-color: #d6dde8; } .carte-module-ill { display: grid; place-items: center; height: 150px; border-radius: 12px; background: #f5f8fc; margin-bottom: 1.1rem; } .carte-module-ill svg { width: 112px; height: 112px; transition: scale .4s cubic-bezier(.3, 1.5, .5, 1); } .carte-module:hover .carte-module-ill svg { scale: 1.07; } .carte-module h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .4rem; } .carte-module p { color: var(--jb-texte); font-size: .95rem; margin: 0; } @media (max-width: 575.98px) { .carte-module-ill { height: 118px; } .carte-module-ill svg { width: 90px; height: 90px; } } .grille-modules > .col:nth-child(3n+2) { --delai: .1s; } .grille-modules > .col:nth-child(3n+3) { --delai: .2s; } /* La vidéo : affiche dessinée, YouTube ne se charge qu'au clic */ .video-cadre { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--jb-bleu); box-shadow: 0 30px 60px rgba(4, 53, 129, .22); } .video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; color: #fff; text-align: left; background: radial-gradient(120% 90% at 72% 38%, #0a4aa8 0%, var(--jb-bleu) 45%, #031f52 100%); } .video-affiche { position: absolute; inset: 0; display: block; } .video-anneaux { position: absolute; top: 50%; left: 50%; width: 115%; translate: -50% -50%; } .video-anneaux circle { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: .3; } .video-marque { position: absolute; left: 5%; bottom: 8%; display: flex; align-items: center; gap: .85rem; font-size: .9rem; color: rgba(255, 255, 255, .82); } .video-marque b { display: block; color: #fff; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; } .video-medaillon { width: 60px; height: 60px; flex: none; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); } .video-medaillon svg { width: 62%; height: 62%; } .video-lecture { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: #fff; color: var(--jb-bleu); display: grid; place-items: center; font-size: 2rem; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); transition: scale .3s cubic-bezier(.3, 1.5, .5, 1); } .video-lecture .ico { translate: 3px 0; } .video-lecture::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: jb-pulse 2.4s ease-out infinite; } .video-facade:hover .video-lecture, .video-facade:focus-visible .video-lecture { scale: 1.08; } @keyframes jb-pulse { from { scale: .8; opacity: .9; } to { scale: 1.35; opacity: 0; } } @media (min-width: 768px) { .video-lecture { width: 92px; height: 92px; margin: -46px 0 0 -46px; font-size: 2.4rem; } .video-medaillon { width: 72px; height: 72px; } .video-marque b { font-size: 1.5rem; } } @media (max-width: 575.98px) { .video-marque { display: none; } } /* Sur mesure : les points cochés un à un */ .lien-fleche { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; font-weight: 600; text-decoration: none; } .lien-fleche .ico { transition: translate .25s ease; } .lien-fleche:hover .ico { translate: 4px 0; } .coches { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; } @media (min-width: 576px) { .coches { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .coches li { display: flex; align-items: center; gap: .8rem; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 12px; padding: .9rem 1rem; font-weight: 500; box-shadow: 0 4px 12px rgba(15, 26, 46, .04); } .coche { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--jb-turquoise-clair); color: var(--jb-turquoise-texte); font-size: 1.05rem; } .coches li:nth-child(2) { --delai: .08s; } .coches li:nth-child(3) { --delai: .16s; } .coches li:nth-child(4) { --delai: .24s; } .coches li:nth-child(5) { --delai: .32s; } .coches li:nth-child(6) { --delai: .4s; } .coches li.a-apparaitre .coche { scale: .3; transition: scale .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--delai, 0s) + .25s); } .coches li.a-apparaitre.apparu .coche { scale: 1; } /* L'orbite des logiciels issus d'AtlasCRM */ .famille { position: relative; width: min(100%, 500px); aspect-ratio: 1; margin-inline: auto; } .famille-rayons { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .famille-anneau { fill: none; stroke: #d3dde9; stroke-width: .35; stroke-dasharray: 1.2 1.6; } .famille-rayons line { stroke: var(--jb-turquoise); stroke-width: .5; stroke-linecap: round; stroke-dasharray: 1; opacity: .55; } .famille-centre, .famille-sat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--jb-encre); } .famille-centre { left: 50%; top: 50%; } .fs-1 { left: 50%; top: 10%; } .fs-2 { left: 88%; top: 37.6%; } .fs-3 { left: 73.5%; top: 82.4%; } .fs-4 { left: 26.5%; top: 82.4%; } .fs-5 { left: 12%; top: 37.6%; } .famille-4 .fs-1 { left: 21.7%; top: 21.7%; } /* quatre logiciels : en carré (inc/bloc-famille.php) */ .famille-4 .fs-2 { left: 78.3%; top: 21.7%; } .famille-4 .fs-3 { left: 78.3%; top: 78.3%; } .famille-4 .fs-4 { left: 21.7%; top: 78.3%; } .fam-disque { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--jb-ligne); color: var(--jb-bleu); font-size: 1.35rem; box-shadow: 0 14px 30px rgba(15, 26, 46, .12), inset 0 0 0 5px #fff, inset 0 0 0 100px #f5f8fc; transition: scale .3s cubic-bezier(.3, 1.5, .5, 1); } .famille-centre .fam-disque { width: 100px; height: 100px; border: 2px solid var(--jb-bleu); box-shadow: 0 20px 44px rgba(4, 53, 129, .22), inset 0 0 0 6px #fff, inset 0 0 0 100px #f5f8fc; } .famille-centre .fam-disque svg { width: 62%; height: 62%; } .fam-nom { position: relative; margin-top: -.75rem; font-size: .7rem; font-weight: 600; white-space: nowrap; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 999px; padding: .1rem .55rem; box-shadow: 0 4px 10px rgba(15, 26, 46, .06); } .famille-centre .fam-nom { background: var(--jb-bleu); border-color: var(--jb-bleu); color: #fff; } a.famille-sat:hover .fam-disque { scale: 1.08; } a.famille-sat:hover .fam-nom { color: var(--jb-bleu); border-color: var(--jb-bleu); } .famille-sat.ici .fam-disque { border: 2px solid var(--jb-turquoise); } .famille-sat .fam-disque { animation: jb-flotte 7s ease-in-out infinite; } .fs-2 .fam-disque, .fs-4 .fam-disque { animation-delay: -3.5s; } @media (min-width: 576px) { .fam-disque { width: 78px; height: 78px; font-size: 1.75rem; } .famille-centre .fam-disque { width: 132px; height: 132px; } .fam-nom { font-size: .78rem; padding: .12rem .65rem; } } .famille.a-apparaitre .famille-rayons line { stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.4, 0, .2, 1) .35s; } .famille.a-apparaitre.apparu .famille-rayons line { stroke-dashoffset: 0; } .famille.a-apparaitre .famille-centre, .famille.a-apparaitre .famille-sat { opacity: 0; scale: .5; transition: opacity .4s ease var(--delai, 0s), scale .5s cubic-bezier(.2, .9, .3, 1.2) var(--delai, 0s); } .famille.a-apparaitre.apparu .famille-centre, .famille.a-apparaitre.apparu .famille-sat { opacity: 1; scale: 1; } .famille-centre { --delai: .1s; } .fs-1 { --delai: .7s; } .fs-2 { --delai: .8s; } .fs-3 { --delai: .9s; } .fs-4 { --delai: 1s; } .fs-5 { --delai: 1.1s; } /* La location : quatre étapes */ @media (min-width: 992px) { .etapes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Questions fréquentes (accordéon Bootstrap) */ .faq { --bs-accordion-border-color: var(--jb-ligne); --bs-accordion-border-radius: 14px; --bs-accordion-inner-border-radius: 13px; --bs-accordion-btn-padding-x: 1.25rem; --bs-accordion-btn-padding-y: 1.1rem; --bs-accordion-active-bg: #fff; --bs-accordion-active-color: var(--jb-bleu); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(4, 53, 129, .18); } .faq .accordion-item { border: 1px solid var(--jb-ligne); border-radius: 14px; overflow: hidden; margin-bottom: .75rem; } .faq .accordion-button { font-weight: 600; font-size: 1rem; color: var(--jb-encre); } .faq .accordion-button:not(.collapsed) { color: var(--jb-bleu); box-shadow: none; } .faq .accordion-body { color: var(--jb-texte); padding-top: 0; } /* Bandeau final : la démo, avec la mascotte qui dépasse du cadre */ .bandeau-demo { padding: 1.5rem 0 5rem; } .bandeau-carte { position: relative; border-radius: 24px; padding: 2.2rem 1.5rem; color: #fff; box-shadow: 0 30px 60px rgba(4, 53, 129, .22); background: radial-gradient(120% 140% at 85% 0%, #0a4aa8 0%, var(--jb-bleu) 50%, #031f52 100%); } .bandeau-mascotte { display: none; } .bandeau-demo .surtitre { color: #7fd6db; } .bandeau-titre { font-weight: 800; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.12; letter-spacing: -.03em; color: #fff; margin-bottom: .8rem; } .bandeau-titre .point { color: #3cc8cf; } .bandeau-intro { color: rgba(255, 255, 255, .86); max-width: 36rem; margin-bottom: 0; } .bandeau-demo .contact-liens { margin-bottom: 0; } @media (min-width: 992px) { .bandeau-demo { padding-top: 5rem; } .bandeau-carte { padding: 3rem 3rem 3rem 290px; } .bandeau-mascotte { display: block; position: absolute; left: 70px; bottom: 0; height: 390px; width: auto; } } /* ==================== Bloc « Sur mesure » (inc/bloc-sur-mesure.php) ==================== */ /* Le texte : trois points, puis le bouton WhatsApp et le lien vers la page Sur mesure */ .sm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; margin-top: 1.8rem; } .sm-actions .lien-fleche { margin-top: 0; } /* La scène : l'idée griffonnée sur une page de carnet à spirale, penchée, et le logiciel réalisé posé dessus, en bas à droite. Encre bleue pour le croquis ; sable foncé pour les notes et les flèches, comme un second stylo. */ .sm-scene { --sm-encre: #2b55b4; --sm-note: #a8622a; padding-top: 12px; } .sm-carnet { position: relative; width: 66%; rotate: -3deg; background: #fffdf7; border: 1px solid #ece4d4; border-radius: 6px 6px 12px 12px; box-shadow: 0 18px 40px rgba(15, 26, 46, .10), 0 2px 5px rgba(15, 26, 46, .05); } .sm-croquis { display: block; width: 100%; height: auto; overflow: visible; } .sm-croquis path { fill: none; stroke: var(--sm-encre); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sm-croquis .sm-gras { stroke-width: 2.6; } .sm-croquis .sm-fin { stroke-width: 1.2; opacity: .7; } .sm-croquis .sm-annot { stroke: var(--sm-note); stroke-width: 2; } .sm-croquis .sm-spire { stroke: #8d97a8; stroke-width: 2.4; } .sm-croquis .sm-reglure { stroke: #dfe8f5; stroke-width: 1; } .sm-croquis .sm-marge { stroke: #f0c9a8; stroke-width: 1.2; } .sm-trou { fill: #e8ecf2; stroke: #d3dae4; stroke-width: 1; } .sm-point { fill: var(--sm-encre); } .sm-croquis text { font-family: 'Caveat', cursive; font-weight: 600; font-size: 21px; fill: var(--sm-encre); } .sm-croquis .sm-note { font-size: 19px; fill: var(--sm-note); } /* Le logiciel réalisé (données fictives) */ .sm-ecran { position: relative; z-index: 1; width: 55%; margin: -13% 0 0 auto; } .sm-ecran-corps { background: #f5f7fb; padding: 12px; display: grid; gap: 10px; } .sm-ecran-tete { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .sm-ecran-tete b { font-size: .86rem; font-weight: 700; color: var(--jb-encre); } .sm-ecran-tete small { font-size: .7rem; color: var(--jb-texte); } .sm-lignes { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 10px; overflow: hidden; } .sm-lignes li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border-top: 1px solid var(--jb-ligne); } .sm-lignes li:first-child { border-top: 0; } .sm-logo { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .62rem; font-weight: 700; color: var(--jb-turquoise-texte); background: var(--jb-turquoise-clair); } .sm-lignes li:nth-child(2) .sm-logo { color: #8a5a2b; background: var(--jb-sable-clair); } .sm-lignes li:nth-child(3) .sm-logo { color: var(--jb-crm); background: var(--jb-crm-clair); } .sm-nom { min-width: 0; display: grid; line-height: 1.3; } .sm-nom b { font-size: .76rem; font-weight: 600; color: var(--jb-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sm-nom small { font-size: .66rem; color: var(--jb-texte); } .sm-etat { display: grid; justify-items: end; } .sm-etat > .etat { grid-area: 1 / 1; } .sm-avant { opacity: 0; } /* l'état d'avant le clic (orange, « à faire »), remplacé par celui d'après */ .sm-bouton { position: relative; overflow: hidden; justify-self: end; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 8px; font-size: .76rem; font-weight: 600; color: #fff; background: var(--jb-turquoise-texte); box-shadow: 0 6px 14px rgba(3, 125, 132, .25); } .sm-bouton::after { content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(255, 255, 255, .5); opacity: 0; } @media (max-width: 575.98px) { .sm-carnet { width: 90%; } .sm-ecran { width: 88%; margin-top: -3%; } } /* Au défilement : la page se pose ; le croquis se dessine bloc par bloc (--d) et les notes s'écrivent ; le logiciel arrive, ses lignes l'une après l'autre ; le bouton est cliqué et la 3e ligne change d'état. Sans animation, tout est dans l'état final. */ .a-apparaitre[data-apparition="croquis"] { opacity: 1; translate: none; } .sm-g1 { --d: .25s; } .sm-e1 { --d: .3s; --duree: .6s; } .sm-cadre { --d: .5s; --duree: .5s; } .sm-g2 { --d: .8s; } .sm-r1 { --d: .9s; } .sm-r2 { --d: 1s; } .sm-r3 { --d: 1.1s; } .sm-g3 { --d: 1.2s; } .sm-boucle { --d: 1.4s; --duree: .45s; } .sm-e2 { --d: 1.45s; } .sm-f1 { --d: 1.7s; } .sm-e3 { --d: 1.75s; } .sm-f2 { --d: 2s; } .sm-scene.a-apparaitre .sm-carnet { opacity: 0; rotate: -7deg; translate: -16px 20px; transition: opacity .45s ease, rotate .8s cubic-bezier(.2, .8, .2, 1), translate .8s cubic-bezier(.2, .8, .2, 1); } .sm-scene.a-apparaitre.apparu .sm-carnet { opacity: 1; rotate: -3deg; translate: 0 0; } /* Trou de 1,02 et décalage de 1,01 (pathLength="1") : sans quoi le bout arrondi d'un trait pas encore dessiné laisse un point */ .sm-scene.a-apparaitre .sm-trait { stroke-dasharray: 1 1.02; stroke-dashoffset: 1.01; transition: stroke-dashoffset var(--duree, .3s) ease-in-out var(--d, 0s); } .sm-scene.a-apparaitre.apparu .sm-trait { stroke-dashoffset: 0; } .sm-scene.a-apparaitre .sm-point { opacity: 0; transition: opacity .2s ease 1.35s; } .sm-scene.a-apparaitre.apparu .sm-point { opacity: 1; } .sm-scene.a-apparaitre .sm-ecrit { clip-path: inset(-30% 100% -30% -5%); transition: clip-path var(--duree, .45s) linear var(--d, 0s); } .sm-scene.a-apparaitre.apparu .sm-ecrit { clip-path: inset(-30% -5% -30% -5%); } /* Le logiciel arrive par le bas, jamais par la droite : collé au bord sur téléphone, il ferait défiler la page de côté */ .sm-scene.a-apparaitre .sm-ecran { opacity: 0; translate: 0 34px; transition: opacity .45s ease 2.1s, translate .65s cubic-bezier(.2, .9, .3, 1.1) 2.1s; } .sm-scene.a-apparaitre.apparu .sm-ecran { opacity: 1; translate: 0 0; } .sm-lignes li:nth-child(1) { --d: 2.35s; } .sm-lignes li:nth-child(2) { --d: 2.45s; } .sm-lignes li:nth-child(3) { --d: 2.55s; } .sm-scene.a-apparaitre .sm-lignes li { opacity: 0; translate: 0 8px; transition: opacity .35s ease var(--d), translate .45s cubic-bezier(.2, .8, .2, 1) var(--d); } .sm-scene.a-apparaitre.apparu .sm-lignes li { opacity: 1; translate: 0 0; } .sm-scene.a-apparaitre .sm-bouton { opacity: 0; scale: .7; transition: opacity .3s ease 2.7s, scale .45s cubic-bezier(.3, 1.5, .5, 1) 2.7s; } .sm-scene.a-apparaitre.apparu .sm-bouton { opacity: 1; scale: 1; animation: sm-clic .4s ease 3.25s; } .sm-scene.a-apparaitre.apparu .sm-bouton::after { animation: sm-onde .6s ease-out 3.25s; } .sm-scene.a-apparaitre .sm-avant { opacity: 1; } .sm-scene.a-apparaitre .sm-apres { opacity: 0; } .sm-scene.a-apparaitre.apparu .sm-avant { opacity: 0; transition: opacity .25s ease 3.5s; } .sm-scene.a-apparaitre.apparu .sm-apres { opacity: 1; transition: opacity .3s ease 3.55s; } @keyframes sm-clic { 45% { scale: .92; filter: brightness(.88); } } @keyframes sm-onde { from { opacity: 1; scale: .2; } to { opacity: 0; scale: 1.5; } } /* ==================== Page Dolibarr ==================== */ /* L'écran Configuration › Modules de Dolibarr, dessiné (même fenêtre qu'AtlasCRM) : les menus et les modules s'affichent, puis votre module arrive, son interrupteur bascule et son onglet s'ajoute. Tout est en place à 1,6 s. */ .fenetre-barre span { display: none; min-width: 0; font-size: .74rem; color: #8a96a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 576px) { .fenetre-barre span { display: inline; } } /* sur téléphone, la confirmation le cacherait */ .doli-menu { display: flex; gap: 4px; padding: 6px; background: var(--jb-bleu); } .doli-menu > span { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border-radius: 8px; color: rgba(255, 255, 255, .7); font-size: 1rem; animation: jb-leve .45s cubic-bezier(.2, .8, .2, 1) both; } .doli-menu small { display: none; max-width: 100%; font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doli-menu > span:nth-child(1) { animation-delay: .4s; } .doli-menu > span:nth-child(2) { animation-delay: .46s; } .doli-menu > span:nth-child(3) { animation-delay: .52s; } .doli-menu > span:nth-child(4) { animation-delay: .58s; } .doli-menu > span:nth-child(5) { animation-delay: .64s; } .doli-menu .doli-nouveau { color: #fff; background: rgba(2, 159, 167, .34); box-shadow: inset 0 -2px 0 #3cc8cf; animation: jb-ouvre .45s cubic-bezier(.2, .9, .3, 1.2) 1.3s both; } @media (min-width: 576px) { .doli-menu small { display: block; } } .doli-contenu { background: #f5f7fb; padding: 12px; } .doli-titre { margin: 0 0 9px; font-size: .78rem; font-weight: 700; color: var(--jb-encre); } .doli-modules { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 10px; overflow: hidden; } .doli-modules li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--jb-ligne); animation: jb-leve .5s ease both; } .doli-modules li:first-child { border-top: 0; } .doli-modules li:nth-child(1) { animation-delay: .55s; } .doli-modules li:nth-child(2) { animation-delay: .62s; } .doli-modules li:nth-child(3) { animation-delay: .69s; } .doli-modules li:nth-child(4) { animation-delay: .76s; } .doli-modules li:nth-child(5) { animation-delay: .83s; } .doli-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--jb-crm-clair); color: var(--jb-crm); font-size: .9rem; } .doli-nom b { display: block; font-size: .78rem; font-weight: 600; line-height: 1.3; color: var(--jb-encre); } .doli-nom small { display: block; font-size: .67rem; line-height: 1.3; color: var(--jb-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @keyframes jb-arrive { from { opacity: 0; translate: 26px 0; } to { opacity: 1; translate: 0 0; } } .doli-modules .doli-votre { background: linear-gradient(90deg, var(--jb-turquoise-clair), #fff 75%); box-shadow: inset 3px 0 0 var(--jb-turquoise); animation: jb-arrive .55s cubic-bezier(.2, .8, .2, 1) .95s both; } .doli-votre .doli-ic { background: var(--jb-turquoise); color: #fff; } .doli-votre em { font-style: normal; font-size: .6rem; font-weight: 700; white-space: nowrap; background: var(--jb-sable-clair); color: #8a5a2b; border-radius: 999px; padding: .1rem .45rem; margin-left: .35rem; vertical-align: 1px; } /* Interrupteurs allumés, au bleu des logiciels ; celui de votre module, turquoise, bascule une fois sa ligne arrivée */ @keyframes jb-allume { from { background: #cfd6e0; } } @keyframes jb-bascule { from { translate: 0 0; } } .interrupteur { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--jb-crm); } .interrupteur::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 26, 46, .25); translate: 14px 0; } .doli-votre .interrupteur { background: var(--jb-turquoise); animation: jb-allume .3s ease 1.2s both; } .doli-votre .interrupteur::after { animation: jb-bascule .35s cubic-bezier(.3, 1.4, .5, 1) 1.2s both; } /* La confirmation arrive en haut à droite, comme les messages de Dolibarr */ .pastille-doli { top: -16px; right: 24px; bottom: auto; animation-delay: 1.55s, 2.2s; } /* placée après .pastille-flottante : l'emporte à toutes les largeurs */ /* La preuve : le vrai début de result.php dans un éditeur de code, ma ligne surlignée */ .liens-code { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; } .liens-code a { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; padding: .5rem .85rem; border: 1.5px solid #d3d9e3; border-radius: 10px; background: #fff; color: var(--jb-encre); font-family: var(--jb-mono); font-size: .8rem; text-decoration: none; overflow-wrap: anywhere; transition: border-color .2s ease, color .2s ease; } .liens-code a:hover { border-color: var(--jb-bleu); color: var(--jb-bleu); } .liens-code .ico:last-child { font-size: .7rem; opacity: .6; } .note-libre { margin: 1.4rem 0 0; max-width: 34rem; font-size: .9rem; color: var(--jb-texte); } .editeur-zone { margin: 0; } .editeur-zone figcaption { margin-top: .9rem; font-size: .82rem; color: var(--jb-texte); } .editeur { background: #0f1524; border-radius: 18px; overflow: hidden; box-shadow: 0 32px 64px rgba(15, 26, 46, .2), 0 2px 6px rgba(15, 26, 46, .05); } .editeur-barre { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #161e31; border-bottom: 1px solid rgba(255, 255, 255, .06); } .editeur-barre i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--jb-sable); } .editeur-barre i:nth-child(2) { background: var(--jb-turquoise); } .editeur-barre i:nth-child(3) { background: #4a6bb5; } .editeur-barre span { min-width: 0; margin-left: 8px; font-size: .74rem; color: #8b95a7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .editeur-barre b { color: #e8edf5; font-weight: 600; } /* Les lignes sont des blocs : les espaces du gabarit PHP entre elles ne comptent pas (white-space: normal), seules les lignes gardent les leurs */ .editeur-code { position: relative; z-index: 0; margin: 0; padding: 14px 0 16px; white-space: normal; overflow: hidden; font-family: var(--jb-mono); font-size: .62rem; line-height: 1.95; color: #8792a6; } .editeur-code code { color: inherit; font-size: inherit; } .editeur-code .l { display: block; position: relative; padding-right: 14px; white-space: pre; overflow: hidden; text-overflow: ellipsis; } .editeur-code .n { display: inline-block; width: 2.9em; padding-right: 1em; text-align: right; color: #4b566b; user-select: none; } .editeur-code .l-php { color: var(--jb-sable); } .editeur-code .l-pli { color: #5d687c; font-style: italic; background: rgba(255, 255, 255, .03); } .editeur-code .moi { overflow: visible; color: #dde4ee; } .editeur-code .moi::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(2, 159, 167, .2); box-shadow: inset 3px 0 0 var(--jb-turquoise); transform-origin: left center; } .editeur-code .moi .n { color: #7fd6db; } .editeur-code .moi b { position: relative; color: #fff; font-weight: 700; } /* « C'est moi », comme la vue blame de GitHub : la tête ronde du logo, au-dessus de mon nom (dans le vide de la ligne 1), pointe vers lui */ .editeur-moi { position: absolute; left: -.3em; bottom: calc(100% + 3px); display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 2px; border-radius: 999px; background: #fff; color: var(--jb-bleu); font-family: var(--bs-body-font-family); font-size: .6rem; font-weight: 700; line-height: 1.35; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); transform-origin: 12px 100%; } .editeur-moi::after { content: ''; position: absolute; left: 9px; top: 100%; border: 4px solid transparent; border-top-color: #fff; border-bottom: 0; } .editeur-moi img { width: 14px; height: 14px; border-radius: 50%; } @media (min-width: 576px) { .editeur-code { font-size: .74rem; } .editeur-code .n { width: 3.4em; padding-right: 1.2em; } .editeur-moi { gap: 5px; padding-right: 9px; font-size: .68rem; } .editeur-moi img { width: 18px; height: 18px; } } @media (min-width: 1200px) { .editeur-code { font-size: .8rem; } } /* Au défilement : les lignes s'écrivent une à une, le surlignage balaie ma ligne, puis l'étiquette apparaît */ .editeur-zone.a-apparaitre .l { opacity: 0; translate: -10px 0; transition: opacity .3s ease var(--delai, 0s), translate .4s cubic-bezier(.2, .8, .2, 1) var(--delai, 0s); } .editeur-zone.a-apparaitre.apparu .l { opacity: 1; translate: 0 0; } .editeur-zone.a-apparaitre .moi::after { scale: 0 1; transition: scale .6s cubic-bezier(.2, .8, .2, 1) 1s; } .editeur-zone.a-apparaitre.apparu .moi::after { scale: 1 1; } .editeur-zone.a-apparaitre .editeur-moi { opacity: 0; scale: .4; transition: opacity .3s ease 1.45s, scale .45s cubic-bezier(.3, 1.5, .5, 1) 1.45s; } .editeur-zone.a-apparaitre.apparu .editeur-moi { opacity: 1; scale: 1; } .editeur-code .l:nth-child(2) { --delai: .06s; } .editeur-code .l:nth-child(3) { --delai: .12s; } .editeur-code .l:nth-child(4) { --delai: .18s; } .editeur-code .l:nth-child(5) { --delai: .24s; } .editeur-code .l:nth-child(6) { --delai: .3s; } .editeur-code .l:nth-child(7) { --delai: .36s; } .editeur-code .l:nth-child(8) { --delai: .42s; } .editeur-code .l:nth-child(9) { --delai: .48s; } .editeur-code .l:nth-child(10) { --delai: .54s; } .editeur-code .l:nth-child(11) { --delai: .6s; } .editeur-code .l:nth-child(12) { --delai: .66s; } .editeur-code .l:nth-child(13) { --delai: .72s; } /* ==================== Page InkCRM ==================== */ /* Les quatre encres de l'impression : gouttes et cartouches */ .g-k { color: var(--ink-noir); } .g-c { color: var(--ink-cyan); } .g-m { color: var(--ink-magenta); } .g-y { color: var(--ink-jaune); } /* La fiche client d'InkCRM, dessinée (même fenêtre qu'AtlasCRM, données fictives) : l'imprimante s'ouvre, ses cartouches s'affichent, la noire (stock client 0) est signalée puis part dans le panier, le compteur du panier passe à 1, puis le devis est envoyé. Tout est en place à 1,6 s. */ .fenetre-barre b .ico { color: var(--jb-crm); } .ink-entete { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--jb-ligne); } .ink-entete b { min-width: 0; font-size: .86rem; font-weight: 700; color: var(--jb-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ink-statut { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: .64rem; font-weight: 700; color: var(--jb-vert); background: #ecfdf3; border-radius: 999px; padding: .15rem .55rem; } .ink-statut::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ink-ville { display: none; align-items: center; gap: 4px; margin-left: auto; font-size: .72rem; color: var(--jb-texte); white-space: nowrap; } /* Les onglets de la fiche, chacun avec sa couleur comme dans InkCRM (--io) ; sur téléphone, icônes seules et compteur en pastille */ .ink-corps { display: grid; grid-template-columns: 50px minmax(0, 1fr); background: #f5f7fb; } .ink-onglets { list-style: none; margin: 0; padding: 10px 6px; display: flex; flex-direction: column; gap: 4px; background: #fff; border-right: 1px solid var(--jb-ligne); } .ink-onglets li { --io: #475569; position: relative; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 9px; font-size: .74rem; color: var(--jb-encre); white-space: nowrap; animation: jb-glisse .45s cubic-bezier(.2, .8, .2, 1) both; } .ink-onglets .io-contacts { --io: #7c3aed; } .ink-onglets .io-parc { --io: #0ea5e9; } .ink-onglets .io-panier { --io: #16a34a; } .ink-onglets .io-ventes { --io: #4f46e5; } .ink-onglets .actif { background: #e0f2fe; box-shadow: inset 3px 0 0 var(--io); } .io-ic { width: 26px; height: 26px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--io); color: #fff; font-size: .8rem; } .io-nom { display: none; } .ink-onglets li b { position: absolute; top: 0; left: 24px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #fff; border: 1.5px solid var(--io); color: var(--io); font-size: .58rem; font-weight: 700; line-height: 13px; text-align: center; } .ink-onglets li:nth-child(1) { animation-delay: .45s; } .ink-onglets li:nth-child(2) { animation-delay: .51s; } .ink-onglets li:nth-child(3) { animation-delay: .57s; } .ink-onglets li:nth-child(4) { animation-delay: .63s; } .ink-onglets li:nth-child(5) { animation-delay: .69s; } /* L'imprimante et ses cartouches suivies */ .ink-contenu { display: grid; gap: 10px; align-content: start; padding: 12px 12px 28px; } /* le bas laisse la place à la pastille */ .ink-carte { background: #fff; border: 1px solid var(--jb-ligne); border-radius: 12px; overflow: hidden; } .ink-machine { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f0f7ff; border-bottom: 1px solid var(--jb-ligne); animation: jb-leve .5s ease .6s both; } .ink-machine > span:last-child { min-width: 0; } .ink-machine-ic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #0ea5e9; color: #fff; font-size: .9rem; } .ink-machine b { display: block; font-size: .8rem; font-weight: 700; color: var(--jb-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ink-machine small { display: block; font-size: .64rem; color: var(--jb-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ink-colonnes { display: none; } .ink-conso { list-style: none; margin: 0; padding: 0; } .ink-conso li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 26px; align-items: center; gap: 9px; padding: 8px 12px; border-top: 1px solid var(--jb-ligne); font-size: .76rem; animation: jb-leve .5s ease both; } .ink-conso li:first-child { border-top: 0; } .ink-conso li:nth-child(1) { animation-delay: .75s; } .ink-conso li:nth-child(2) { animation-delay: .83s; } .ink-conso li:nth-child(3) { animation-delay: .91s; } .ink-conso li:nth-child(4) { animation-delay: .99s; } .ink-conso b { min-width: 0; font-weight: 600; color: var(--jb-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .goutte { display: grid; place-items: center; font-size: .95rem; } .ink-capa { display: none; justify-self: start; font-size: .64rem; font-weight: 600; white-space: nowrap; color: var(--jb-crm); background: var(--jb-crm-clair); border-radius: 999px; padding: .12rem .5rem; } .ink-stock { justify-self: start; min-width: 26px; text-align: center; font-size: .68rem; font-weight: 700; color: var(--jb-texte); background: var(--jb-gris); border-radius: 999px; padding: .12rem .45rem; } .ink-stock.vide { color: #b91c1c; background: #fef2f2; } .ink-btn { position: relative; width: 26px; height: 26px; border: 1px solid var(--jb-ligne); border-radius: 8px; background: #fff; color: var(--jb-texte); font-size: .8rem; } .ink-btn .ico { position: absolute; inset: 0; margin: auto; } .ink-btn .ico + .ico { opacity: 0; } .ink-suggestions { display: none; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .66rem; animation: jb-leve .5s ease 1.05s both; } .ink-suggestions small { font-size: inherit; color: var(--jb-texte); } .ink-suggestions span { background: #fff; border: 1px solid var(--jb-ligne); border-radius: 999px; padding: .15rem .55rem; color: var(--jb-encre); } /* Les onglets prennent leur nom quand la fenêtre a la place : pas entre 992 et 1199 px, où elle partage la largeur avec le texte */ @media (min-width: 576px) and (max-width: 991.98px), (min-width: 1200px) { .ink-corps { grid-template-columns: 158px minmax(0, 1fr); } .ink-onglets { padding: 12px 7px; } .io-nom { display: inline; } .ink-onglets li b { position: static; margin-left: auto; } } @media (min-width: 576px) { .ink-ville { display: inline-flex; } /* Colonnes de largeur fixe : l'en-tête et les lignes sont des grilles distinctes, elles restent alignées */ .ink-colonnes, .ink-conso li { grid-template-columns: 16px minmax(0, 1fr) 82px 54px 26px; } .ink-colonnes { display: grid; align-items: center; gap: 9px; padding: 7px 12px; border-bottom: 1px solid var(--jb-ligne); font-size: .56rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: #8a96a8; animation: jb-leve .5s ease .68s both; } .ink-colonnes span:first-child { grid-column: 1 / 3; } .ink-capa { display: inline-block; } .ink-suggestions { display: flex; } } /* La cartouche noire, en rupture chez le client : signalée, puis ajoutée au panier (le bouton passe au vert) */ @keyframes jb-surligne { from { background: #fff; box-shadow: inset 0 0 0 #16a34a; } } @keyframes jb-alerte { from { box-shadow: 0 0 0 0 rgba(185, 28, 28, .5); } to { box-shadow: 0 0 0 9px rgba(185, 28, 28, 0); } } @keyframes jb-bouton-panier { from { background: #fff; border-color: var(--jb-ligne); color: var(--jb-texte); } } @keyframes jb-saute { 0%, 100% { scale: 1; } 50% { scale: 1.4; } } .ink-conso li.ink-ajoute { background: #f0fdf4; box-shadow: inset 3px 0 0 #16a34a; animation: jb-leve .5s ease .75s both, jb-surligne .4s ease 1.15s both; } .ink-ajoute .ink-stock { animation: jb-alerte .8s ease-out 1s both; } .ink-ajoute .ink-btn { background: #16a34a; border-color: #16a34a; color: #fff; animation: jb-bouton-panier .3s ease 1.2s both; } .ink-ajoute .ink-btn .ico:first-child { opacity: 0; animation: jb-apparait .2s ease 1.2s reverse both; } .ink-ajoute .ink-btn .ico + .ico { opacity: 1; animation: jb-apparait .25s ease 1.25s both; } /* Le compteur du panier passe de 0 à 1 (CSS seul ; sans @property, il affiche directement 1) */ @keyframes jb-panier { from { --n: 0; } } .compteur-panier { --n: 1; counter-reset: n var(--n); animation: jb-panier .3s step-end 1.25s both, jb-saute .4s ease 1.25s both; } .compteur-panier::after { content: counter(n); } .pastille-ink { top: auto; bottom: -18px; right: 24px; animation-delay: 1.6s, 2.2s; } /* placée après .pastille-flottante : l'emporte à toutes les largeurs */ /* Le catalogue : l'imprimante au centre, ses cartouches autour (les 963 au plus près, les 963XL, plus grandes, plus loin). Au défilement, les liens se tracent, puis les cartouches s'ouvrent une à une. Positions : $placesCompat dans la page. */ .compat { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; } .compat-rayons { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .compat-anneau { fill: none; stroke: #d3dde9; stroke-width: .35; stroke-dasharray: 1.2 1.6; } .compat-rayons line { stroke: var(--jb-turquoise); stroke-width: .45; stroke-linecap: round; stroke-dasharray: 1; opacity: .5; } .compat-centre, .compat-sat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; } .compat-centre { left: 50%; top: 50%; } .cp-disque { border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--jb-ligne); box-shadow: 0 14px 30px rgba(15, 26, 46, .12), inset 0 0 0 5px #fff, inset 0 0 0 100px #f5f8fc; } .compat-centre .cp-disque { width: 104px; height: 104px; border: 2px solid var(--jb-bleu); box-shadow: 0 20px 44px rgba(4, 53, 129, .22), inset 0 0 0 6px #fff, inset 0 0 0 100px #f5f8fc; } .compat-centre .cp-disque svg { width: 64%; height: 64%; } .compat-sat .cp-disque { width: 42px; height: 42px; font-size: 1.05rem; animation: jb-flotte 7s ease-in-out infinite; } .compat-sat.cs-xl .cp-disque { width: 50px; height: 50px; font-size: 1.3rem; } .cs-2 .cp-disque, .cs-4 .cp-disque, .cs-6 .cp-disque, .cs-8 .cp-disque { animation-delay: -3.5s; } .cp-nom { position: relative; margin-top: -.6rem; font-size: .62rem; font-weight: 600; white-space: nowrap; color: var(--jb-encre); background: #fff; border: 1px solid var(--jb-ligne); border-radius: 999px; padding: .08rem .5rem; box-shadow: 0 4px 10px rgba(15, 26, 46, .06); } .compat-centre .cp-nom { background: var(--jb-bleu); border-color: var(--jb-bleu); color: #fff; } .cs-1 { left: 50%; top: 24%; } .cs-2 { left: 76%; top: 50%; } .cs-3 { left: 50%; top: 76%; } .cs-4 { left: 24%; top: 50%; } .cs-5 { left: 79.7%; top: 20.3%; } .cs-6 { left: 79.7%; top: 79.7%; } .cs-7 { left: 20.3%; top: 79.7%; } .cs-8 { left: 20.3%; top: 20.3%; } @media (min-width: 576px) { .compat-centre .cp-disque { width: 136px; height: 136px; } .compat-sat .cp-disque { width: 54px; height: 54px; font-size: 1.35rem; } .compat-sat.cs-xl .cp-disque { width: 64px; height: 64px; font-size: 1.65rem; } .cp-nom { font-size: .72rem; padding: .1rem .6rem; } } .compat.a-apparaitre .compat-rayons line { stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.4, 0, .2, 1) .3s; } .compat.a-apparaitre.apparu .compat-rayons line { stroke-dashoffset: 0; } .compat.a-apparaitre .compat-centre, .compat.a-apparaitre .compat-sat { opacity: 0; scale: .5; transition: opacity .4s ease var(--delai, 0s), scale .5s cubic-bezier(.2, .9, .3, 1.2) var(--delai, 0s); } .compat.a-apparaitre.apparu .compat-centre, .compat.a-apparaitre.apparu .compat-sat { opacity: 1; scale: 1; } .compat-centre { --delai: .1s; } .cs-1 { --delai: .55s; } .cs-2 { --delai: .63s; } .cs-3 { --delai: .71s; } .cs-4 { --delai: .79s; } .cs-5 { --delai: .95s; } .cs-6 { --delai: 1.03s; } .cs-7 { --delai: 1.11s; } .cs-8 { --delai: 1.19s; } /* Les chiffres du catalogue comptent par milliers jusqu'à leur valeur, au défilement (CSS seul : transition sur --n) */ .chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.8rem 0 0; } .chiffre { margin: 0; } .chiffre small { display: block; font-size: .72rem; color: var(--jb-texte); } .chiffre b { --n: var(--fin); display: block; font-size: clamp(1.45rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--jb-bleu); counter-reset: n var(--n); } .chiffre b::after { content: counter(n) "\A0 000"; } /* espace insécable normale : l'espace fine d'Inter colle les chiffres en gros caractères */ .chiffre span:last-child { display: block; font-size: .85rem; color: var(--jb-texte); } .ch-imprimantes { --fin: 24; } .ch-consommables { --fin: 14; } .ch-compat { --fin: 45; } .chiffres.a-apparaitre .chiffre b { --n: 1; } .chiffres.a-apparaitre.apparu .chiffre b { --n: var(--fin); transition: --n 1.4s cubic-bezier(.2, .8, .2, 1) .35s; } /* Le pilotage : les points, et la carte « Performance du mois » dessinée (données fictives). Jour 18 sur 22 jours ouvrés : le repère sable du rythme du jour est à 81,8 % de l'objectif. Au défilement, les barres se remplissent. */ .points { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .6rem; } .points li { display: flex; align-items: flex-start; gap: .65rem; color: var(--jb-texte); } .points .ico { margin-top: .2em; font-size: 1.05rem; color: var(--jb-turquoise-texte); } .perf { background: #fff; border: 1px solid var(--jb-ligne); border-radius: 18px; padding: 18px; box-shadow: 0 32px 64px rgba(15, 26, 46, .14), 0 2px 6px rgba(15, 26, 46, .05); } .perf-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .perf-tete b { font-size: .92rem; font-weight: 700; color: var(--jb-encre); } .perf-jour { font-size: .7rem; font-weight: 600; white-space: nowrap; color: var(--jb-crm); background: var(--jb-crm-clair); border-radius: 999px; padding: .2rem .65rem; } .perf-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; } .perf-kpi { background: #f5f7fb; border-radius: 10px; padding: 9px 11px; } .perf-kpi small { display: block; font-size: .64rem; color: var(--jb-texte); } .perf-kpi b { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: var(--jb-encre); } .perf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .perf-liste li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "av nom ecart" "av barre barre"; align-items: center; column-gap: 10px; row-gap: 6px; } .perf-av { grid-area: av; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .64rem; font-weight: 700; color: #fff; background: #7c3aed; } .perf-liste li:nth-child(2) .perf-av { background: #0284c7; } .perf-liste li:nth-child(3) .perf-av { background: #db2777; } .perf-liste li:nth-child(4) .perf-av { background: #0f766e; } .perf-nom { grid-area: nom; min-width: 0; font-size: .8rem; font-weight: 600; color: var(--jb-encre); white-space: nowrap; } .perf-nom span { margin-left: .3rem; font-weight: 500; color: var(--jb-texte); } .perf-ecart { grid-area: ecart; font-size: .64rem; font-weight: 700; white-space: nowrap; border-radius: 999px; padding: .12rem .5rem; } .ecart-plus { color: var(--jb-vert); background: #ecfdf3; } .ecart-moins { color: #b45309; background: #fff7ed; } .perf-barre { grid-area: barre; position: relative; height: 8px; border-radius: 999px; background: #edf1f7; } .perf-barre i { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--p) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--jb-crm), #7b8ff3); transition: width 1.1s cubic-bezier(.2, .8, .2, 1) calc(var(--delai, 0s) + .2s); } .perf-barre::after { content: ''; position: absolute; left: 81.8%; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--jb-sable); } .p-92 { --p: .92; } .p-86 { --p: .86; } .p-74 { --p: .74; } .p-61 { --p: .61; } .perf-legende { display: flex; align-items: center; gap: .5rem; margin: 16px 0 0; font-size: .7rem; color: var(--jb-texte); } .perf-legende i { width: 2px; height: 12px; border-radius: 1px; background: var(--jb-sable); } .perf-liste li:nth-child(1) { --delai: .25s; } .perf-liste li:nth-child(2) { --delai: .37s; } .perf-liste li:nth-child(3) { --delai: .49s; } .perf-liste li:nth-child(4) { --delai: .61s; } .perf.a-apparaitre .perf-liste li { opacity: 0; translate: 0 10px; transition: opacity .4s ease var(--delai, 0s), translate .5s cubic-bezier(.2, .8, .2, 1) var(--delai, 0s); } .perf.a-apparaitre.apparu .perf-liste li { opacity: 1; translate: 0 0; } .perf.a-apparaitre .perf-barre i { width: 0; } .perf.a-apparaitre.apparu .perf-barre i { width: calc(var(--p) * 100%); } .perf.a-apparaitre .perf-barre::after { opacity: 0; transition: opacity .4s ease 1.3s; } .perf.a-apparaitre.apparu .perf-barre::after { opacity: 1; } .perf.a-apparaitre .perf-ecart { opacity: 0; scale: .5; transition: opacity .3s ease calc(var(--delai, 0s) + 1s), scale .45s cubic-bezier(.3, 1.5, .5, 1) calc(var(--delai, 0s) + 1s); } .perf.a-apparaitre.apparu .perf-ecart { opacity: 1; scale: 1; } /* ==================== Page QuickCRM ==================== */ /* La journée d'un commercial sur son téléphone (données fictives) : le planning du jour s'affiche, le rendez-vous de 9 h est ouvert, le devis part depuis le terrain. Autour, l'orbite du site et ses médaillons : rendez-vous, devis, relance, email. Tout est en place à 1,6 s. */ .tel-zone { position: relative; display: grid; place-items: center; padding: 16px 0 24px; animation: jb-monte .8s cubic-bezier(.2, .8, .2, 1) .15s both; } .tel-halo { position: absolute; left: 50%; top: 50%; width: min(100%, 520px); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; } .tel-halo::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(2, 159, 167, .12), rgba(4, 53, 129, .05) 65%, transparent); } .tel-halo > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* l'anneau seulement, pas les icônes des médaillons */ .tel-halo > svg circle { fill: none; } .tel-anneau { stroke: #d8e2ed; stroke-width: .3; stroke-dasharray: 100; animation: jb-trace 1s cubic-bezier(.4, 0, .2, 1) .2s both; } .tel-arc { stroke: var(--jb-turquoise); stroke-width: .55; stroke-linecap: round; stroke-dasharray: 33.33 66.67; stroke-dashoffset: -58; animation: jb-arc .6s ease-out .8s both; } /* Un satellite tourne lentement sur l'anneau (rayon 46 % : inset 4 %) */ .tel-satellite { position: absolute; inset: 4%; border-radius: 50%; animation: jb-tourne 40s linear infinite, jb-apparait .8s ease 1.3s both; } .tel-satellite::before { content: ''; position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--jb-turquoise); box-shadow: 0 0 0 5px rgba(2, 159, 167, .16); } /* Quatre médaillons sur l'anneau, de part et d'autre du téléphone (angles −145°, −35°, 145° et 35°) ; pas sur téléphone, faute de place */ .tel-sat { display: none; position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; place-items: center; font-size: 1.25rem; background: #fff; border: 1px solid var(--jb-ligne); box-shadow: 0 14px 30px rgba(15, 26, 46, .12), inset 0 0 0 4px #fff, inset 0 0 0 100px #f5f8fc; animation: jb-ouvre .5s cubic-bezier(.2, .9, .3, 1.2) both, jb-flotte 7s ease-in-out infinite; } .ts-1 { left: 12.3%; top: 23.6%; color: #16a34a; animation-delay: 1.3s, 2s; } .ts-2 { left: 87.7%; top: 23.6%; color: var(--jb-crm); animation-delay: 1.4s, 3.5s; } .ts-3 { left: 12.3%; top: 76.4%; color: #d97706; animation-delay: 1.5s, 2.8s; } .ts-4 { left: 87.7%; top: 76.4%; color: var(--jb-bleu); animation-delay: 1.6s, 4.2s; } /* Le téléphone : cadre, encoche, barre d'état et barre de QuickCRM */ .tel { position: relative; z-index: 1; width: 264px; padding: 9px; border-radius: 42px; background: #0f1a2e; box-shadow: 0 40px 70px rgba(15, 26, 46, .28), inset 0 0 0 1.5px #2b3652; } .tel-ecran { position: relative; overflow: hidden; min-height: 500px; padding-bottom: 72px; border-radius: 34px; background: #f5f7fb; } .tel-ecran::before { content: ''; position: absolute; z-index: 2; top: 9px; left: 50%; width: 74px; height: 20px; margin-left: -37px; border-radius: 999px; background: #0f1a2e; } /* l'encoche */ .tel-statut { display: flex; align-items: center; justify-content: space-between; padding: 11px 22px 4px 26px; background: #fff; font-size: .66rem; font-weight: 700; color: var(--jb-encre); } .tel-statut i { position: relative; width: 20px; height: 10px; border: 1.5px solid var(--jb-encre); border-radius: 3px; } .tel-statut i::after { content: ''; position: absolute; inset: 1.5px 4px 1.5px 1.5px; border-radius: 1px; background: var(--jb-encre); } /* la batterie */ .tel-barre { display: flex; align-items: center; gap: 7px; padding: 8px 16px 10px; background: #fff; border-bottom: 1px solid var(--jb-ligne); } .tel-barre svg { width: 22px; height: 22px; flex: none; } .tel-barre b { font-size: .86rem; font-weight: 800; letter-spacing: -.01em; color: var(--jb-encre); } .tel-barre b span { color: var(--jb-crm); } .tel-barre .ico { margin-left: auto; font-size: .95rem; color: var(--jb-texte); } /* Le planning du jour : types et couleurs du calendrier de QuickCRM */ .tel-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; animation: jb-leve .5s ease .45s both; } .tel-titre b { font-size: .98rem; font-weight: 800; color: var(--jb-encre); } .tel-titre small { font-size: .66rem; white-space: nowrap; color: var(--jb-texte); } .tel-agenda { list-style: none; margin: 0; padding: 0 12px; display: grid; gap: 8px; } .tel-agenda li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; padding: 10px 11px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 14px; animation: jb-leve .5s ease both; } .tel-agenda time { grid-row: span 3; font-size: .76rem; font-weight: 800; color: var(--jb-encre); } .tel-type { justify-self: start; font-size: .54rem; font-weight: 700; color: #fff; background: var(--type); border-radius: 999px; padding: .1rem .45rem; } .t-rdc { --type: #16a34a; } .t-rdp { --type: #2563eb; } .t-rel { --type: #d97706; } .t-liv { --type: #7c3aed; } .tel-agenda b { min-width: 0; margin-top: 2px; font-size: .76rem; font-weight: 700; color: var(--jb-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tel-agenda small { display: flex; align-items: center; gap: 3px; font-size: .64rem; color: var(--jb-texte); } .tel-agenda li:nth-child(2) { animation-delay: .65s; } .tel-agenda li:nth-child(3) { animation-delay: .75s; } .tel-agenda li:nth-child(4) { animation-delay: .85s; } /* Le rendez-vous de 9 h, ouvert (placée après les délais ci-dessus, cette règle de même spécificité l'emporte) */ @keyframes jb-selection { from { border-color: var(--jb-ligne); box-shadow: 0 0 0 0 rgba(67, 97, 238, 0); } } .tel-agenda li.actif { border-color: var(--jb-crm); box-shadow: 0 0 0 3px rgba(67, 97, 238, .14); animation: jb-leve .5s ease .55s both, jb-selection .4s ease 1s both; } /* Le devis part depuis le terrain : le message en bas de l'écran */ @keyframes jb-toast { from { opacity: 0; translate: 0 24px; } } .tel-toast { position: absolute; left: 12px; right: 12px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 14px; background: #0f1a2e; color: #fff; font-size: .7rem; font-weight: 600; box-shadow: 0 12px 24px rgba(15, 26, 46, .25); animation: jb-toast .45s cubic-bezier(.2, .9, .3, 1.1) 1.25s both; } .tel-toast .ico { flex: none; font-size: 1rem; color: #4ade80; } @media (min-width: 576px) { .tel { width: 276px; } .tel-sat { display: grid; } } /* Chaque matin, l'essentiel : la carte « Action requise » du tableau de bord, dessinée (données fictives) ; les tuiles s'ouvrent en cascade */ .actions { background: #fff; border: 1px solid var(--jb-ligne); border-radius: 18px; padding: 18px; box-shadow: 0 32px 64px rgba(15, 26, 46, .14), 0 2px 6px rgba(15, 26, 46, .05); } .actions-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .actions-tete b { font-size: .92rem; font-weight: 700; color: var(--jb-encre); } .actions-tete span { font-size: .7rem; font-weight: 600; white-space: nowrap; color: var(--jb-crm); background: var(--jb-crm-clair); border-radius: 999px; padding: .2rem .65rem; } .actions-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .action { --c: var(--jb-crm); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; text-align: center; border: 1px solid var(--jb-ligne); border-radius: 12px; } .action-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); } .action b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--c); } .action small { font-size: .7rem; line-height: 1.3; color: var(--jb-texte); } .act-violet { --c: #7c3aed; } .act-sable { --c: #a16207; } .act-ambre { --c: #d97706; } .act-vert { --c: #16a34a; } .act-rouge { --c: #dc2626; } .act-bleu { --c: #4361ee; } @media (min-width: 576px) { .actions-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .actions-grille .action:nth-child(2) { --delai: .08s; } .actions-grille .action:nth-child(3) { --delai: .16s; } .actions-grille .action:nth-child(4) { --delai: .24s; } .actions-grille .action:nth-child(5) { --delai: .32s; } .actions-grille .action:nth-child(6) { --delai: .4s; } .actions.a-apparaitre .action { opacity: 0; scale: .9; transition: opacity .4s ease var(--delai, 0s), scale .5s cubic-bezier(.2, .9, .3, 1.2) var(--delai, 0s); } .actions.a-apparaitre.apparu .action { opacity: 1; scale: 1; } .actions.a-apparaitre .action b { scale: .3; transition: scale .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--delai, 0s) + .3s); } .actions.a-apparaitre.apparu .action b { scale: 1; } /* ==================== Page AsafarCRM ==================== */ /* Le sens du nom, sous l'accroche */ .nom-sens { margin: 1rem 0 0; font-size: .92rem; color: var(--jb-texte); animation: jb-leve .7s cubic-bezier(.2, .8, .2, 1) .88s both; } .nom-sens::before { content: ''; display: inline-block; width: 18px; height: 2px; margin-right: .6rem; vertical-align: .3em; border-radius: 1px; background: var(--jb-sable); } .nom-sens b { font-weight: 700; color: var(--jb-encre); } .nom-sens + .publics { margin-top: 1.1rem; } /* La caisse d'AsafarCRM, dessinée d'après le vrai point de vente (données fictives). Deux boîtes sont sur le ticket (0,45 et 0,55 s), la troisième arrive (0,5 s), le laser lit son code (0,9 s), le code s'inscrit puis s'efface (1 s), sa ligne s'ajoute et le total suit (1,2 s), le stock est mis à jour (1,5 s). Sans JavaScript ni animation, tout s'affiche dans l'état final. */ .as-zone { margin-bottom: 40px; } /* la boîte dépasse sous la fenêtre */ .as-caisse { display: grid; gap: 12px; padding: 14px 14px 46px; background: #f5f7fb; } .as-saisie { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 7px; background: #fff; border: 2px solid var(--jb-crm); border-radius: 14px; box-shadow: 0 0 0 4px rgba(67, 97, 238, .12); animation: jb-leve .5s ease .4s both, as-bip .7s ease 1.05s; } @keyframes as-bip { from { border-color: #16a34a; box-shadow: 0 0 0 6px rgba(22, 163, 74, .22); } } .as-saisie-ic { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--jb-crm-clair); color: var(--jb-crm); font-size: .9rem; } .as-champ { position: relative; flex: 1; min-width: 0; height: 20px; font-size: .76rem; } .as-invite, .as-code { position: absolute; inset: 0; display: flex; align-items: center; white-space: nowrap; overflow: hidden; } .as-invite { color: #94a3b8; animation: as-invite .6s linear 1s forwards; } .as-code { opacity: 0; font-weight: 600; letter-spacing: .03em; color: var(--jb-encre); animation: as-code .6s linear 1s forwards; } @keyframes as-invite { 0%, 75% { opacity: 0; } 100% { opacity: 1; } } @keyframes as-code { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 30%, 75% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } } .as-pret { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: .22rem .55rem; border-radius: 999px; font-size: .62rem; font-weight: 700; white-space: nowrap; color: #16a34a; background: rgba(22, 163, 74, .09); } .as-pret::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: as-pouls 1.6s ease-in-out infinite; } @keyframes as-pouls { 50% { opacity: .35; } } /* Les lignes du ticket : vignette, produit et présentation, quantité, total */ .as-grille { display: grid; gap: 12px; align-items: start; } .as-lignes { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 12px; overflow: hidden; } .as-lignes li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 8px 11px; border-top: 1px solid var(--jb-ligne); animation: jb-leve .45s ease both; } .as-lignes li:first-child { border-top: 0; animation-delay: .45s; } .as-lignes li:nth-child(2) { animation-delay: .55s; } .as-vignette { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #f0fdf4; color: #15803d; font-size: .85rem; } .as-prod { min-width: 0; } .as-prod b { display: block; font-size: .76rem; font-weight: 700; color: var(--jb-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .as-prod small { display: block; font-size: .62rem; color: var(--jb-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .as-qte { font-size: .66rem; font-weight: 700; color: var(--jb-texte); background: var(--jb-gris); border-radius: 999px; padding: .1rem .45rem; } .as-prix { min-width: 40px; text-align: right; font-size: .76rem; font-weight: 700; color: var(--jb-encre); } /* La boîte qui vient d'être scannée : sa ligne arrive et s'éclaire, comme dans la vraie caisse (placée après les délais ci-dessus) */ @keyframes as-eclair { from { background: rgba(67, 97, 238, .16); } } .as-lignes li.as-nouvelle { animation: jb-leve .45s ease 1.2s both, as-eclair 1.4s ease 1.2s both; } /* Le ticket en cours : sur téléphone, le total et Encaisser sur une ligne ; au-delà, le panneau de la vraie caisse */ .as-ticket { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 10px; padding: 10px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 12px; animation: jb-leve .5s ease .5s both; } .as-ticket-titre, .as-ticket-sous, .as-ticket-ligne { display: none; } .as-grand { display: block; padding: 8px 12px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #0f1524 0%, #1e2a4a 100%); } .as-grand small { display: block; font-size: .54rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .as-grand b { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; } .as-encaisser { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border-radius: 10px; font-size: .78rem; font-weight: 800; white-space: nowrap; color: #fff; background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); box-shadow: 0 8px 18px rgba(22, 163, 74, .28); animation: as-actif .3s ease .45s both; } @keyframes as-actif { from { background: #e5e9f0; color: #94a3b8; box-shadow: none; } } /* inactif tant que le ticket est vide */ @media (min-width: 576px) { .as-caisse { padding-bottom: 14px; } .as-grille { grid-template-columns: minmax(0, 1fr) 158px; } .as-ticket { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 12px; } .as-ticket-titre { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; color: var(--jb-encre); } .as-ticket-titre .ico { color: var(--jb-crm); } .as-ticket-sous { display: block; margin-top: -6px; font-size: .64rem; color: var(--jb-texte); } .as-ticket-ligne { display: flex; justify-content: space-between; padding: 6px 0; border-block: 1px dashed var(--jb-ligne); font-size: .68rem; color: var(--jb-texte); } .as-ticket-ligne b { color: var(--jb-encre); } .as-encaisser { padding: 9px 10px; } } /* Le nombre de produits et le total suivent les bips : 14,90, puis 70,90, puis 139,40 DH (CSS seul ; sans @property, le total final s'affiche) */ @property --as-e { syntax: ''; inherits: false; initial-value: 0; } @property --as-c { syntax: ''; inherits: false; initial-value: 0; } @property --as-k { syntax: ''; inherits: false; initial-value: 0; } @keyframes as-total { 0% { --as-e: 0; --as-c: 0; --as-k: 0; } 6.25% { --as-e: 14; --as-c: 90; --as-k: 1; } 18.75% { --as-e: 70; --as-c: 90; --as-k: 2; } 100% { --as-e: 139; --as-c: 40; --as-k: 3; } } .as-ticket { --as-e: 139; --as-c: 40; --as-k: 3; counter-reset: as-e var(--as-e) as-c var(--as-c) as-k var(--as-k); animation: jb-leve .5s ease .5s both, as-total .8s step-end .4s both; } .as-nb::after { content: counter(as-k); } .as-montant::after { content: counter(as-e) "," counter(as-c, decimal-leading-zero); } /* La boîte arrive devant la caisse, le laser de la douchette passe sur son code-barre (x 94 à 158, y 71 à 103 sur 200 × 132) */ .as-boite { position: absolute; z-index: 2; left: 4px; bottom: -36px; width: 118px; aspect-ratio: 200 / 132; rotate: -6deg; animation: as-boite .55s cubic-bezier(.2, .9, .3, 1.1) .5s both; } .as-boite svg { display: block; width: 100%; height: 100%; } @keyframes as-boite { from { opacity: 0; translate: -24px 28px; } } .as-laser { position: absolute; left: 45%; width: 37%; top: 65%; height: 2px; border-radius: 1px; background: #ef4444; box-shadow: 0 0 6px 1px rgba(239, 68, 68, .65); opacity: 0; animation: as-laser .45s ease .9s both; } @keyframes as-laser { 0% { opacity: 0; scale: .2 1; } 30%, 70% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1 1; } } @media (min-width: 576px) { .as-boite { left: -14px; bottom: -46px; width: 150px; } } /* La pastille : sur téléphone, en bas à droite, dans la marge sous le ticket ; au-delà, sur la barre de la fenêtre, où le titre lui laisse la place */ .pastille-flottante.as-pastille { top: auto; bottom: -18px; right: 14px; animation-delay: 1.5s, 2.1s; } @media (min-width: 576px) { .pastille-flottante.as-pastille { top: -18px; bottom: auto; right: 20px; } } /* Le scan : un téléphone en lecteur de code-barre (données fictives), dans l'orbite du site. Au défilement, la ligne balaie le code, le cadre passe au vert (1,55 s), puis la fiche de la boîte monte (1,65 s). « scan », « fiche » et « journal » : le conteneur reste en place. */ .a-apparaitre[data-apparition="scan"], .a-apparaitre[data-apparition="fiche"], .a-apparaitre[data-apparition="journal"] { opacity: 1; translate: none; } .as-points li b { font-weight: 600; color: var(--jb-encre); } .as-tel-zone { position: relative; display: grid; place-items: center; padding: 16px 0 24px; overflow-x: clip; } /* le satellite, en tournant, débordait de 30 px sur téléphone */ .as-tel .tel-ecran { padding-bottom: 0; } .as-logo { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; background: #15803d; color: #fff; font-size: .72rem; } .as-logo .ico { width: 13px; height: 13px; margin: 0; color: #fff; } /* l'emporte sur .tel-barre .ico et .tel-barre svg (page QuickCRM) */ .as-tel .tel-barre b span { color: #15803d; } .as-viseur { position: relative; height: 262px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(90% 70% at 50% 45%, #3a4458 0%, #1b2333 70%, #121826 100%); } .as-etiquette { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 16px 8px; margin-top: -16px; background: #fbfaf7; border-radius: 6px; rotate: -4deg; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } .as-etiquette svg { display: block; width: 132px; height: 58px; } .as-etiquette small { font-size: .62rem; letter-spacing: .14em; color: var(--jb-encre); } .as-cadre { position: absolute; left: 50%; top: 50%; width: 196px; height: 124px; translate: -50% -62%; } .as-cadre i { position: absolute; width: 24px; height: 24px; border: 3px solid #4ade80; } .as-cadre i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; } .as-cadre i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; } .as-cadre i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; } .as-cadre i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; } .as-balayage { position: absolute; left: 50%; top: 50%; width: 180px; height: 2px; margin: -18px 0 0 -90px; border-radius: 1px; background: #ef4444; box-shadow: 0 0 8px 2px rgba(239, 68, 68, .55); opacity: 0; } @keyframes as-balaye { 0% { opacity: 0; translate: 0 -50px; } 12%, 88% { opacity: 1; } 50% { translate: 0 50px; } 100% { opacity: 0; translate: 0 -50px; } } .as-aide { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; background: rgba(15, 26, 46, .6); color: #fff; font-size: .62rem; font-weight: 600; } .as-resultat { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: 0 -6px 24px rgba(15, 26, 46, .14); } .as-lu { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 4px; padding: .12rem .5rem; border-radius: 999px; font-size: .62rem; font-weight: 700; color: var(--jb-vert); background: #ecfdf3; } .as-resultat > b { font-size: .92rem; font-weight: 800; color: var(--jb-encre); } .as-resultat > small { font-size: .66rem; color: var(--jb-texte); } .as-resultat-bas { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 8px; } .as-ppv { font-size: 1rem; font-weight: 800; color: var(--jb-encre); } .as-en-stock { font-size: .64rem; font-weight: 700; color: var(--jb-vert); background: #ecfdf3; border-radius: 999px; padding: .12rem .5rem; } .as-ajouter { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 12px; font-size: .76rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); } .as-tel-zone.a-apparaitre .as-cadre i { border-color: #fff; transition: border-color .3s ease 1.55s; } .as-tel-zone.a-apparaitre.apparu .as-cadre i { border-color: #4ade80; } .as-tel-zone.a-apparaitre.apparu .as-balayage { animation: as-balaye 1.2s ease-in-out .3s both; } .as-tel-zone.a-apparaitre .as-resultat { opacity: 0; translate: 0 40px; transition: opacity .4s ease 1.65s, translate .55s cubic-bezier(.2, .9, .3, 1.1) 1.65s; } .as-tel-zone.a-apparaitre.apparu .as-resultat { opacity: 1; translate: 0 0; } /* Le catalogue : les chiffres (classes de la page InkCRM) et la fiche de la boîte, dessinée ; au défilement, ses informations arrivent une à une */ .ch-medicaments { --fin: 8; } .ch-generiques { --fin: 5; } .ch-codes { --fin: 100; } .ch-codes b::after { content: counter(n) "\A0%"; } .as-med, .as-journal { background: #fff; border: 1px solid var(--jb-ligne); border-radius: 18px; padding: 18px; box-shadow: 0 32px 64px rgba(15, 26, 46, .14), 0 2px 6px rgba(15, 26, 46, .05); } .as-med-tete, .as-journal-tete { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--jb-ligne); } .as-med-photo { width: 62px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #f5f8fc; border: 1px solid var(--jb-ligne); } .as-med-photo svg { width: 54px; height: 36px; } .as-med-nom { flex: 1; min-width: 0; } .as-med-nom b { display: block; font-size: .98rem; font-weight: 800; color: var(--jb-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .as-med-nom small { display: flex; align-items: center; gap: 5px; font-size: .7rem; letter-spacing: .04em; white-space: nowrap; color: var(--jb-texte); } .as-med-badge { flex: none; font-size: .66rem; font-weight: 700; color: #8a5a2b; background: var(--jb-sable-clair); border-radius: 999px; padding: .2rem .65rem; } .as-med-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; } .as-med-champs div { background: #f5f7fb; border-radius: 10px; padding: 8px 11px; } .as-med-champs dt { font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a96a8; } .as-med-champs dd { margin: 0; font-size: .82rem; font-weight: 600; color: var(--jb-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .as-med-pied { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .as-med-pied span { border: 1px solid var(--jb-ligne); border-radius: 10px; padding: 9px 12px; } .as-med-pied small { display: block; font-size: .66rem; color: var(--jb-texte); } .as-med-pied b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: var(--jb-bleu); } @media (min-width: 576px) { .as-med-champs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .as-med-champs div:nth-child(2) { --delai: .06s; } .as-med-champs div:nth-child(3) { --delai: .12s; } .as-med-champs div:nth-child(4) { --delai: .18s; } .as-med-champs div:nth-child(5) { --delai: .24s; } .as-med-champs div:nth-child(6) { --delai: .3s; } .as-med-pied span:nth-child(1) { --delai: .45s; } .as-med-pied span:nth-child(2) { --delai: .53s; } .as-med.a-apparaitre .as-med-champs div, .as-med.a-apparaitre .as-med-pied span { opacity: 0; translate: 0 10px; transition: opacity .4s ease calc(var(--delai, 0s) + .2s), translate .5s cubic-bezier(.2, .8, .2, 1) calc(var(--delai, 0s) + .2s); } .as-med.a-apparaitre.apparu .as-med-champs div, .as-med.a-apparaitre.apparu .as-med-pied span { opacity: 1; translate: 0 0; } /* Le journal de stock de la boîte, dessiné (données fictives) : au défilement, les mouvements arrivent un à un et le stock compte jusqu'à 14 */ .as-journal-stock { flex: none; text-align: right; } .as-journal-stock small { display: block; font-size: .64rem; color: var(--jb-texte); } .as-journal-stock b { --n: 14; display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--jb-bleu); counter-reset: n var(--n); } .as-journal-stock b::after { content: counter(n); } .as-mvts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .as-mvts li { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f8fafc; } .as-mvt { --c: var(--jb-crm); justify-self: start; font-size: .64rem; font-weight: 700; border-radius: 999px; padding: .14rem .55rem; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); } .mvt-entree { --c: #15803d; } .mvt-inventaire { --c: #7c3aed; } .mvt-sortie { --c: #b45309; } .as-mvt-texte { min-width: 0; } .as-mvt-texte b { display: block; font-size: .78rem; font-weight: 600; color: var(--jb-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .as-mvt-texte small { display: block; font-size: .64rem; color: var(--jb-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .as-mvt-qte { min-width: 30px; text-align: right; font-size: .9rem; font-weight: 800; color: #b91c1c; } .as-mvt-qte.plus { color: var(--jb-vert); } .as-mvts li:nth-child(1) { --delai: .1s; } .as-mvts li:nth-child(2) { --delai: .18s; } .as-mvts li:nth-child(3) { --delai: .26s; } .as-mvts li:nth-child(4) { --delai: .34s; } .as-mvts li:nth-child(5) { --delai: .42s; } .as-journal.a-apparaitre .as-mvts li { opacity: 0; translate: 0 10px; transition: opacity .4s ease var(--delai, 0s), translate .5s cubic-bezier(.2, .8, .2, 1) var(--delai, 0s); } .as-journal.a-apparaitre.apparu .as-mvts li { opacity: 1; translate: 0 0; } .as-journal.a-apparaitre .as-journal-stock b { --n: 0; } .as-journal.a-apparaitre.apparu .as-journal-stock b { --n: 14; transition: --n 1.2s cubic-bezier(.2, .8, .2, 1) .4s; } /* ==================== Page QahwaCRM ==================== */ /* La caisse de QahwaCRM, dessinée (données fictives). Le serveur tape deux cafés noirs (0,95 et 1,2 s), un thé à la menthe (1,45 s) et un jus d'avocat (1,7 s) : le bouton s'enfonce sous le doigt, la commande et le total suivent. Il imprime (2 s) : le ticket sort de l'imprimante (2,05 à 2,8 s), puis la recette de Hamid augmente (2,9 s). Sans JavaScript ni animation, tout s'affiche dans l'état final. */ .qa-zone { margin-bottom: 44px; } /* l'imprimante dépasse sous la fenêtre */ .qa-caisse { display: grid; gap: 10px; padding: 12px 12px 58px; background: #f5f7fb; } .qa-familles { display: flex; gap: 5px; margin-bottom: 9px; overflow: hidden; animation: jb-leve .45s ease .3s both; } .qa-familles span { flex: none; padding: .24rem .65rem; border-radius: 999px; font-size: .64rem; font-weight: 700; color: var(--jb-texte); background: #fff; border: 1px solid var(--jb-ligne); } .qa-familles .actif { color: #fff; background: #6b4226; border-color: #6b4226; } .qa-tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .qa-tuiles li { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 7px 5px 6px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 12px; box-shadow: 0 2px 6px rgba(15, 26, 46, .04); animation: jb-leve .4s ease both; } .qa-tuiles svg { width: 38px; height: 38px; margin-bottom: 2px; } .qa-tuiles b { max-width: 100%; font-size: .64rem; font-weight: 700; line-height: 1.25; text-align: center; text-wrap: balance; color: var(--jb-encre); } /* « Thé à la menthe » sur deux lignes quand le bouton est étroit */ .qa-tuiles small { font-size: .6rem; font-weight: 700; color: #8a5a2b; } .qa-tuiles li:nth-child(1) { animation-delay: .35s; } .qa-tuiles li:nth-child(2) { animation-delay: .39s; } .qa-tuiles li:nth-child(3) { animation-delay: .43s; } .qa-tuiles li:nth-child(4) { animation-delay: .47s; } .qa-tuiles li:nth-child(5) { animation-delay: .51s; } .qa-tuiles li:nth-child(6) { animation-delay: .55s; } .qa-tuiles li:nth-child(7) { animation-delay: .59s; } .qa-tuiles li:nth-child(8) { animation-delay: .63s; } .qa-tuiles li:nth-child(9) { animation-delay: .67s; } /* Le doigt du serveur : le bouton s'enfonce et s'éclaire, une pastille compte les boissons (placé après les délais ci-dessus) */ .qa-tape::after { content: ''; position: absolute; left: 50%; top: 36%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(15, 26, 46, .14); border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(15, 26, 46, .1); opacity: 0; pointer-events: none; } @keyframes qa-doigt { 0% { opacity: 0; scale: .55; } 30% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.3; } } @keyframes qa-doigt-2 { 0% { opacity: 0; scale: .55; } 30% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.3; } } @keyframes qa-appui { 35% { scale: .93; background: #f8ede3; border-color: #dfa97b; } } @keyframes qa-appui-2 { 35% { scale: .93; background: #f8ede3; border-color: #dfa97b; } } .qa-tuiles li.qa-tape-1 { animation: jb-leve .4s ease .35s both, qa-appui .32s ease .95s, qa-appui-2 .32s ease 1.2s; } .qa-tuiles li.qa-tape-3 { animation: jb-leve .4s ease .43s both, qa-appui .32s ease 1.45s; } .qa-tuiles li.qa-tape-4 { animation: jb-leve .4s ease .51s both, qa-appui .32s ease 1.7s; } .qa-tape-1::after { animation: qa-doigt .5s ease-out .95s, qa-doigt-2 .5s ease-out 1.2s; } .qa-tape-3::after { animation: qa-doigt .5s ease-out 1.45s; } .qa-tape-4::after { animation: qa-doigt .5s ease-out 1.7s; } .qa-nb { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; font-size: .6rem; font-weight: 800; color: #fff; background: #6b4226; box-shadow: 0 0 0 2px #fff; animation: jb-ouvre .35s cubic-bezier(.2, .9, .3, 1.2) both; } .qa-tape-3 .qa-nb { animation-delay: 1.45s; } .qa-tape-4 .qa-nb { animation-delay: 1.7s; } .qa-tape-3 .qa-nb::after, .qa-tape-4 .qa-nb::after { content: '1'; } @property --qa-q { syntax: ''; inherits: false; initial-value: 0; } @keyframes qa-deux { from { --qa-q: 1; } to { --qa-q: 2; } } .qa-tape-1 .qa-nb { --qa-q: 2; counter-reset: qa-q var(--qa-q); animation: jb-ouvre .35s cubic-bezier(.2, .9, .3, 1.2) .95s both, qa-deux .25s step-end .95s both, jb-saute .3s ease 1.2s; } .qa-tape-1 .qa-nb::after { content: counter(qa-q); } /* La commande : sur téléphone, le total et Imprimer sur une ligne, au-dessus des boutons (l'imprimante est en bas) ; au-delà, le panneau, à droite */ .qa-commande { order: -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 12px; } .qa-commande-titre, .qa-commande-sous, .qa-lignes, .qa-articles { display: none; } .qa-grand { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #0f1524 0%, #1e2a4a 100%); } .qa-grand small { font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .qa-grand b { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; } .qa-imprimer { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border-radius: 10px; font-size: .74rem; font-weight: 800; white-space: nowrap; color: #fff; background: linear-gradient(135deg, #7a4b2a 0%, #5c371d 100%); box-shadow: 0 8px 18px rgba(92, 55, 29, .3); animation: qa-actif .25s ease .95s both, qa-imprime .35s ease 2s; } @keyframes qa-actif { from { background: #e5e9f0; color: #94a3b8; box-shadow: none; } } /* inactif tant que la commande est vide */ @keyframes qa-imprime { 40% { scale: .94; filter: brightness(.85); } } .qa-lignes { list-style: none; margin: 0; padding: 0; gap: 2px; } .qa-lignes li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 5px 4px; border-radius: 8px; font-size: .68rem; animation: jb-leve .35s ease both; } .qa-q { height: 20px; display: grid; place-items: center; border-radius: 6px; font-size: .62rem; font-weight: 800; color: #6b4226; background: var(--jb-sable-clair); } .qa-lignes b { min-width: 0; font-weight: 700; color: var(--jb-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qa-p { font-weight: 700; color: var(--jb-encre); } @media (min-width: 576px) { .qa-caisse { grid-template-columns: minmax(0, 1fr) 192px; align-items: start; padding-bottom: 14px; } .qa-commande { order: 0; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 11px; } .qa-commande-titre { display: flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 800; color: var(--jb-encre); } .qa-commande-titre .ico { color: #6b4226; } .qa-commande-sous { display: flex; align-items: center; gap: 5px; margin-top: -5px; font-size: .64rem; color: var(--jb-texte); } .qa-lignes { display: grid; } .qa-articles { display: flex; justify-content: space-between; padding: 6px 0; border-block: 1px dashed var(--jb-ligne); font-size: .66rem; color: var(--jb-texte); } .qa-articles b { color: var(--jb-encre); } .qa-grand { display: block; } .qa-grand small, .qa-grand b { display: block; } .qa-imprimer { padding: 9px 10px; } } /* La ligne s'ajoute et s'éclaire à chaque bouton touché ; le café noir passe de 1 à 2 (CSS seul ; sans @property, l'état final s'affiche) */ @keyframes qa-eclair { from { background: rgba(223, 169, 123, .32); } } @keyframes qa-eclair-2 { from { background: rgba(223, 169, 123, .32); } } @property --qa-lq { syntax: ''; inherits: false; initial-value: 0; } @property --qa-lp { syntax: ''; inherits: false; initial-value: 0; } @keyframes qa-ligne-1 { from { --qa-lq: 1; --qa-lp: 10; } to { --qa-lq: 2; --qa-lp: 20; } } .qa-lignes .qa-l1 { --qa-lq: 2; --qa-lp: 20; counter-reset: qa-lq var(--qa-lq) qa-lp var(--qa-lp); animation: jb-leve .35s ease .95s both, qa-eclair 1s ease .95s, qa-eclair-2 1s ease 1.2s, qa-ligne-1 .25s step-end .95s both; } .qa-l1 .qa-q::after { content: counter(qa-lq); } .qa-l1 .qa-p::after { content: counter(qa-lp) ",00"; } .qa-lignes .qa-l2 { animation: jb-leve .35s ease 1.45s both, qa-eclair 1s ease 1.45s; } .qa-lignes .qa-l3 { animation: jb-leve .35s ease 1.7s both, qa-eclair 1s ease 1.7s; } /* Le total et le nombre d'articles : 10, 20, 30, puis 48 DH */ @property --qa-t { syntax: ''; inherits: false; initial-value: 0; } @property --qa-k { syntax: ''; inherits: false; initial-value: 0; } @keyframes qa-total { 0% { --qa-t: 0; --qa-k: 0; } 5% { --qa-t: 10; --qa-k: 1; } 30% { --qa-t: 20; --qa-k: 2; } 55% { --qa-t: 30; --qa-k: 3; } 80%, 100% { --qa-t: 48; --qa-k: 4; } } .qa-commande { --qa-t: 48; --qa-k: 4; counter-reset: qa-t var(--qa-t) qa-k var(--qa-k); animation: jb-leve .5s ease .45s both, qa-total 1s step-end .9s both; } .qa-montant::after { content: counter(qa-t) ",00"; } .qa-articles b::after { content: counter(qa-k); } /* L'imprimante et son ticket (en-tête et section « Le ticket »). Le ticket sort par la fente, à 29,5 % de la hauteur du dessin, soit 18,44 % de sa largeur : .qa-sortie le cache tant qu'il est dedans. Les tailles du ticket sont en em, pour les deux tailles. */ .qa-sortie { position: relative; z-index: 1; width: 66%; margin-inline: auto; padding: 8px 5% 0; overflow: hidden; } .qa-papier { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25em; padding: 1.2em .9em 1em; font-family: var(--jb-mono); font-size: .5rem; line-height: 1.3; color: #1f2937; text-align: center; filter: drop-shadow(0 6px 10px rgba(15, 26, 46, .18)); background: conic-gradient(from 135deg at 50% 0, #fff 90deg, #0000 0) 0 0 / 8px 4px repeat-x, linear-gradient(#fff 0 0) 0 4px / 100% 100% no-repeat; } /* le bord dentelé, en haut */ .qa-papier-nom { font-family: var(--bs-body-font-family); font-size: 1.15em; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: var(--jb-encre); } .qa-papier small { font-size: .9em; color: #64748b; } .qa-papier-ligne, .qa-papier-infos, .qa-papier-total { display: flex; justify-content: space-between; gap: .6em; text-align: left; } .qa-papier-ligne > span:first-child, .qa-papier-infos > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qa-papier-ligne > span:last-child, .qa-papier-infos > span:last-child { flex: none; } /* le prix et l'heure ne sont jamais coupés */ .qa-papier-infos { color: #475569; } .qa-papier > small + .qa-papier-ligne, .qa-papier-infos + .qa-papier-ligne, .qa-papier-ville + .qa-papier-infos { margin-top: .3em; padding-top: .5em; border-top: 1px dashed #cbd5e1; } .qa-papier-total { margin-top: .35em; padding-top: .45em; border-top: 1px dashed #94a3b8; font-size: 1.15em; font-weight: 800; color: var(--jb-encre); } .qa-papier-merci { margin-top: .4em; padding-top: .6em; border-top: 1px dashed #cbd5e1; } .qa-machine { position: relative; margin-top: -18.44%; } .qa-machine svg { display: block; width: 100%; aspect-ratio: 160 / 100; } .qa-led { position: absolute; left: 85%; top: 66.5%; width: 4%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px 2px rgba(34, 197, 94, .55); } @keyframes qa-led { 50% { opacity: .2; box-shadow: none; } } @keyframes qa-sort { from { translate: 0 100%; } } @keyframes qa-pose { from { opacity: 0; translate: 0 24px; } } .qa-zone .qa-imprimante { position: absolute; z-index: 2; left: -6px; bottom: -40px; width: 150px; animation: qa-pose .5s cubic-bezier(.2, .9, .3, 1.1) .6s both; } .qa-zone .qa-papier { font-size: .4rem; background: #fff; animation: qa-sort .75s cubic-bezier(.3, .7, .3, 1) 2.05s both; } /* bord droit : posé sur les boutons, le bord dentelé laissait voir leur texte */ .qa-zone .qa-led { animation: qa-led .25s ease 2.05s 3; } @media (min-width: 576px) { .qa-zone .qa-imprimante { left: -18px; bottom: -46px; width: 196px; } .qa-zone .qa-papier { font-size: .5rem; } } @media (min-width: 992px) and (max-width: 1199.98px) { /* la fenêtre, à côté du texte, est plus étroite : l'imprimante aussi */ .qa-zone .qa-imprimante { left: -14px; bottom: -40px; width: 156px; } .qa-zone .qa-papier { font-size: .4rem; } } /* La pastille : sur téléphone, en bas à droite, à côté de l'imprimante (en version courte) ; au-delà, sur la barre de la fenêtre */ .pastille-flottante.qa-pastille { top: auto; bottom: -18px; right: 8px; animation-delay: 2.9s, 3.5s; } .qa-de-hamid { display: none; } @media (min-width: 576px) { .pastille-flottante.qa-pastille { top: -18px; bottom: auto; right: 20px; } .qa-de-hamid { display: inline; } } /* « carte », « ticket » et « recette » : le conteneur reste en place, ce sont ses éléments qui s'animent */ .a-apparaitre[data-apparition="carte"], .a-apparaitre[data-apparition="ticket"], .a-apparaitre[data-apparition="recette"] { opacity: 1; translate: none; } .qa-points li b { font-weight: 600; color: var(--jb-encre); } /* L'ardoise du café, dessinée (données fictives) : cadre en bois, craie, prix en sable ; au défilement, les produits s'inscrivent un à un */ .qa-ardoise { padding: 22px 18px 20px; border: 10px solid #b9824f; border-radius: 16px; color: #fff; background: radial-gradient(120% 80% at 30% 0%, #2c3d38 0%, #1f2b28 60%, #19231f 100%); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), inset 0 0 40px rgba(0, 0, 0, .35), 0 32px 64px rgba(15, 26, 46, .2); } .qa-ardoise-titre { margin: 0 0 16px; text-align: center; font-size: 1.15rem; font-weight: 800; letter-spacing: .02em; } .qa-ardoise-titre small { display: block; margin-bottom: 2px; font-size: .64rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--jb-sable); } .qa-ardoise-familles { display: grid; gap: 16px; } @media (min-width: 768px) { .qa-ardoise-familles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } } .qa-famille-nom { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px dashed rgba(255, 255, 255, .25); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--jb-sable); } .qa-famille ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .qa-famille li { display: grid; grid-template-columns: 34px minmax(0, max-content) minmax(6px, 1fr) auto; align-items: center; gap: 6px; } .qa-famille svg { width: 34px; height: 34px; padding: 2px; border-radius: 10px; background: rgba(255, 255, 255, .94); } .qa-famille b { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qa-famille i { align-self: end; margin-bottom: .5em; border-bottom: 2px dotted rgba(255, 255, 255, .3); } /* les points de conduite jusqu'au prix */ .qa-famille li > span { font-size: .8rem; font-weight: 700; color: var(--jb-sable); } .qa-famille:nth-child(2) { --df: .2s; } .qa-famille:nth-child(3) { --df: .4s; } .qa-famille li:nth-child(2) { --di: .07s; } .qa-famille li:nth-child(3) { --di: .14s; } .qa-ardoise.a-apparaitre .qa-famille li { opacity: 0; translate: -10px 0; transition: opacity .4s ease calc(var(--df, 0s) + var(--di, 0s) + .2s), translate .5s cubic-bezier(.2, .8, .2, 1) calc(var(--df, 0s) + var(--di, 0s) + .2s); } .qa-ardoise.a-apparaitre.apparu .qa-famille li { opacity: 1; translate: 0 0; } /* Le ticket, en grand : au défilement, il sort de l'imprimante et le voyant clignote */ .qa-impression { width: min(100%, 360px); margin-inline: auto; } .qa-impression .qa-papier { font-size: .78rem; gap: .3em; } .qa-impression.a-apparaitre .qa-papier { translate: 0 100%; transition: translate 1.5s cubic-bezier(.3, .7, .3, 1) .35s; } .qa-impression.a-apparaitre.apparu .qa-papier { translate: 0 0; } .qa-impression.a-apparaitre.apparu .qa-led { animation: qa-led .3s ease .35s 5; } /* La recette du jour sur le téléphone du propriétaire (données fictives), dans l'orbite du site (classes du téléphone de QuickCRM). Au défilement, le total compte jusqu'à 4 236 DH (milliers et unités, CSS seul), les serveurs puis les produits arrivent, les barres se remplissent. */ .qa-tel-zone { position: relative; display: grid; place-items: center; padding: 16px 0 24px; overflow-x: clip; } /* le satellite, en tournant, déborde sur téléphone */ .qa-tel .tel-ecran { padding-bottom: 14px; } .qa-logo { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; background: #6b4226; } .qa-logo .ico { width: 13px; height: 13px; margin: 0; color: #fff; } /* l'emporte sur .tel-barre .ico et .tel-barre svg */ .qa-tel .tel-barre b span { color: #6b4226; } .qa-recette-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 13px 16px 9px; } .qa-recette-tete b { font-size: .95rem; font-weight: 800; color: var(--jb-encre); } .qa-recette-tete small { font-size: .64rem; white-space: nowrap; color: var(--jb-texte); } .qa-total { margin: 0 12px; padding: 11px 14px 12px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #0f1524 0%, #1e2a4a 100%); box-shadow: 0 12px 24px rgba(15, 26, 46, .22); } .qa-total small { display: block; font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .qa-total span { display: block; font-size: .64rem; color: rgba(255, 255, 255, .72); } @counter-style qa-trois { system: extends decimal; pad: 3 "0"; } @property --qa-m { syntax: ''; inherits: false; initial-value: 0; } @property --qa-u { syntax: ''; inherits: false; initial-value: 0; } .qa-total b { --qa-m: 4; --qa-u: 236; display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; counter-reset: qa-m var(--qa-m) qa-u var(--qa-u); } .qa-total b::after { content: counter(qa-m) "\A0" counter(qa-u, qa-trois) "\A0 DH"; } .qa-rubrique { margin: 12px 16px 6px; font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a96a8; } .qa-serveurs, .qa-ventes { list-style: none; margin: 0 12px; padding: 0; display: grid; gap: 6px; } .qa-serveurs li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px 7px 8px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 12px; } .qa-serveurs li:nth-child(1) { --c: #6b4226; } .qa-serveurs li:nth-child(2) { --c: var(--jb-turquoise); } .qa-serveurs li:nth-child(3) { --c: var(--jb-bleu); } .qa-avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 800; color: #fff; background: var(--c); } .qa-serveur { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 6px; row-gap: 5px; } .qa-serveur b { font-size: .72rem; font-weight: 700; color: var(--jb-encre); } .qa-serveur small { font-size: .58rem; white-space: nowrap; color: var(--jb-texte); } .qa-barre { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--c); transform-origin: left center; } .qa-barre-2 { width: 92%; } /* 1 412 DH pour 1 528 */ .qa-barre-3 { width: 85%; } /* 1 296 DH */ .qa-somme { font-size: .78rem; font-weight: 800; white-space: nowrap; color: var(--jb-encre); } .qa-ventes li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 12px; } .qa-ventes svg { width: 26px; height: 26px; } .qa-ventes b { font-size: .7rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--jb-encre); } .qa-ventes li > span { font-size: .7rem; font-weight: 800; color: #6b4226; } .qa-serveurs li:nth-child(2) { --delai: .08s; } .qa-serveurs li:nth-child(3) { --delai: .16s; } .qa-ventes li:nth-child(1) { --delai: .36s; } .qa-ventes li:nth-child(2) { --delai: .44s; } .qa-ventes li:nth-child(3) { --delai: .52s; } .qa-tel-zone.a-apparaitre .qa-total b { --qa-m: 0; --qa-u: 0; } .qa-tel-zone.a-apparaitre.apparu .qa-total b { --qa-m: 4; --qa-u: 236; transition: --qa-m 1.4s cubic-bezier(.2, .8, .2, 1) .5s, --qa-u 1.4s cubic-bezier(.2, .8, .2, 1) .5s; } .qa-tel-zone.a-apparaitre .qa-serveurs li, .qa-tel-zone.a-apparaitre .qa-ventes li { opacity: 0; translate: 0 10px; transition: opacity .4s ease calc(var(--delai, 0s) + .6s), translate .5s cubic-bezier(.2, .8, .2, 1) calc(var(--delai, 0s) + .6s); } .qa-tel-zone.a-apparaitre.apparu .qa-serveurs li, .qa-tel-zone.a-apparaitre.apparu .qa-ventes li { opacity: 1; translate: 0 0; } .qa-tel-zone.a-apparaitre .qa-barre { scale: 0 1; transition: scale 1s cubic-bezier(.2, .8, .2, 1) calc(var(--delai, 0s) + .9s); } .qa-tel-zone.a-apparaitre.apparu .qa-barre { scale: 1 1; } /* ==================== Page FiduCompta ==================== */ /* Le journal des achats de FiduCompta, dessiné (données fictives), au bordeaux du logiciel (#7c2d3a, la reliure d'un grand livre). La facture arrive dans le dossier (0,45 s) ; son HT, sa TVA et son TTC s'éclairent tour à tour (0,95, 1,3 et 1,65 s) et deviennent chacun une ligne de l'écriture (1, 1,35 et 1,7 s) ; les totaux suivent, l'écriture s'équilibre (1,95 s), puis la TVA récupérable s'affiche (2,3 s). Sans JavaScript ni animation, tout s'affiche dans l'état final. */ .fc-zone { margin-bottom: 26px; } /* sur téléphone, la pastille dépasse sous la fenêtre */ .fc-ecran { display: grid; gap: 10px; padding: 12px; background: #f5f7fb; } .fc-dossier { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 8px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 12px; animation: jb-leve .45s ease .3s both; } .fc-dossier-ic { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: .8rem; color: #fff; background: #7c2d3a; } .fc-dossier-nom { min-width: 0; } .fc-dossier-nom b { display: block; font-size: .74rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--jb-encre); } .fc-dossier-nom small { display: block; font-size: .6rem; color: var(--jb-texte); } .fc-journaux { flex: none; display: flex; gap: 4px; margin-left: auto; } .fc-journaux span { padding: .2rem .55rem; border-radius: 999px; font-size: .6rem; font-weight: 700; color: var(--jb-texte); background: var(--jb-gris); } .fc-journaux .actif { color: #fff; background: #7c2d3a; } .fc-journaux span:nth-child(n+3) { display: none; } /* sur téléphone : Achats et Ventes */ /* La facture, posée à gauche ; l'écriture, à droite. Les tailles de la facture sont en em : une seule règle par largeur */ .fc-saisie { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 10px; align-items: start; } .fc-facture { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: .25em; padding: 1.1em 1em 1em; font-size: .44rem; line-height: 1.3; color: #475569; background: #fff; border-radius: 3px; rotate: -2deg; box-shadow: 0 12px 24px rgba(15, 26, 46, .14), 0 1px 3px rgba(15, 26, 46, .1); animation: fc-arrive .65s cubic-bezier(.2, .9, .3, 1.1) .45s both; } @keyframes fc-arrive { from { opacity: 0; translate: -46px 22px; rotate: -12deg; } } .fc-facture-tete { display: flex; align-items: center; gap: .7em; min-width: 0; padding-bottom: .8em; margin-bottom: .3em; border-bottom: 1px solid #e2e8f0; } .fc-facture-tete > span:last-child { min-width: 0; } .fc-facture-logo { width: 2.8em; height: 2.8em; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .95em; font-weight: 800; color: #fff; background: #c98a57; } .fc-facture-tete b { display: block; font-size: 1.12em; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--jb-encre); } .fc-facture-tete small { display: block; font-size: .92em; } .fc-facture-titre { font-size: 1.12em; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--jb-encre); } .fc-facture-date { font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fc-fl { display: flex; justify-content: space-between; gap: .6em; padding: .4em .5em; margin-inline: -.5em; border-radius: 3px; } .fc-fl > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fc-fl > span:last-child { flex: none; font-weight: 700; color: var(--jb-encre); } .fc-fl-article { margin-top: .4em; } .fc-fl-ht { border-top: 1px dashed #cbd5e1; border-radius: 0 0 3px 3px; } .fc-fl-ttc { font-size: 1.1em; font-weight: 800; color: var(--jb-encre); } .fc-facture-pied { margin-top: .5em; padding-top: .7em; border-top: 1px solid #e2e8f0; font-size: .86em; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #94a3b8; } /* Le montant repris s'éclaire sur la facture, au moment où sa ligne arrive dans l'écriture */ @keyframes fc-repere { 12%, 42% { background: rgba(223, 169, 123, .32); box-shadow: inset 0 0 0 1px #dfa97b; } } .fc-fl-ht { animation: fc-repere .8s ease .95s; } .fc-fl-tva { animation: fc-repere .8s ease 1.3s; } .fc-fl-ttc { animation: fc-repere .8s ease 1.65s; } /* L'écriture : le compte et son libellé, le débit, le crédit */ .fc-ecriture { display: grid; gap: 6px; padding: 9px 9px 10px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 12px; animation: jb-leve .5s ease .55s both; } .fc-ecriture-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 3px; } .fc-ecriture-tete b { font-size: .7rem; font-weight: 800; white-space: nowrap; color: var(--jb-encre); } .fc-ecriture-tete small { font-size: .58rem; white-space: nowrap; color: var(--jb-texte); } .fc-colonnes, .fc-lignes li, .fc-totaux { display: grid; grid-template-columns: minmax(0, 1fr) 46px 46px; align-items: center; column-gap: 5px; } .fc-colonnes { padding: 0 3px 4px; border-bottom: 1px solid var(--jb-ligne); font-size: .5rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a96a8; } .fc-colonnes span + span, .fc-lignes li > span + span, .fc-totaux > span + span { text-align: right; } .fc-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .fc-lignes li { padding: 4px 3px; border-radius: 7px; font-size: .58rem; font-weight: 700; white-space: nowrap; color: var(--jb-encre); animation: jb-leve .35s ease both; } .fc-compte { min-width: 0; } .fc-compte b { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .02em; color: #7c2d3a; } .fc-compte small { display: block; font-size: .52rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; color: var(--jb-texte); } @keyframes fc-eclair { from { background: rgba(223, 169, 123, .32); } } .fc-lignes .fc-l1 { animation: jb-leve .35s ease 1s both, fc-eclair 1.1s ease 1s; } .fc-lignes .fc-l2 { animation: jb-leve .35s ease 1.35s both, fc-eclair 1.1s ease 1.35s; } .fc-lignes .fc-l3 { animation: jb-leve .35s ease 1.7s both, fc-eclair 1.1s ease 1.7s; } /* Les totaux suivent les lignes : débit 1 250 puis 1 500, crédit 0 puis 1 500 (CSS seul ; sans @property, l'état final s'affiche). Le millier ne s'écrit que s'il y en a un (« 0,00 », mais « 1 500,00 ») */ @counter-style fc-mille { system: additive; additive-symbols: 1 "1\A0", 0 ""; } @property --fc-dm { syntax: ''; inherits: false; initial-value: 0; } @property --fc-du { syntax: ''; inherits: false; initial-value: 0; } @property --fc-cm { syntax: ''; inherits: false; initial-value: 0; } @property --fc-cu { syntax: ''; inherits: false; initial-value: 0; } @keyframes fc-totaux { 0% { --fc-dm: 1; --fc-du: 250; --fc-cm: 0; --fc-cu: 0; } 50% { --fc-dm: 1; --fc-du: 500; --fc-cm: 0; --fc-cu: 0; } 100% { --fc-dm: 1; --fc-du: 500; --fc-cm: 1; --fc-cu: 500; } } @keyframes fc-juste { 30%, 65% { color: var(--jb-vert); } } .fc-totaux { --fc-dm: 1; --fc-du: 500; --fc-cm: 1; --fc-cu: 500; counter-reset: fc-dm var(--fc-dm) fc-du var(--fc-du) fc-cm var(--fc-cm) fc-cu var(--fc-cu); padding: 5px 3px 0; border-top: 2px solid var(--jb-encre); font-size: .58rem; font-weight: 800; white-space: nowrap; color: var(--jb-encre); animation: jb-leve .35s ease 1s both, fc-totaux .7s step-end 1s both, fc-juste 1s ease 1.95s; } .fc-td::after { content: counter(fc-dm, fc-mille) counter(fc-du) ",00"; } .fc-tc::after { content: counter(fc-cm, fc-mille) counter(fc-cu) ",00"; } .fc-equilibre { justify-self: end; display: inline-flex; align-items: center; gap: 5px; padding: .18rem .55rem; border-radius: 999px; font-size: .58rem; font-weight: 700; white-space: nowrap; color: var(--jb-vert); background: #ecfdf3; animation: jb-ouvre .4s cubic-bezier(.2, .9, .3, 1.2) 1.95s both; } @media (min-width: 576px) { .fc-journaux span:nth-child(n+3) { display: inline; } .fc-facture { font-size: .54rem; } .fc-ecran { padding: 14px; } .fc-saisie { gap: 14px; } .fc-ecriture { padding: 11px 11px 12px; } .fc-colonnes, .fc-lignes li, .fc-totaux { grid-template-columns: minmax(0, 1fr) 58px 58px; column-gap: 6px; } .fc-lignes li, .fc-totaux { font-size: .66rem; } .fc-compte b { font-size: .7rem; } .fc-compte small { font-size: .58rem; } .fc-equilibre { font-size: .62rem; } } @media (min-width: 992px) and (max-width: 1199.98px) { /* la fenêtre, à côté du texte, est plus étroite */ .fc-journaux span:nth-child(n+4) { display: none; } .fc-facture { font-size: .48rem; } .fc-colonnes, .fc-lignes li, .fc-totaux { grid-template-columns: minmax(0, 1fr) 52px 52px; } .fc-lignes li, .fc-totaux { font-size: .6rem; } } /* La pastille : sur téléphone, en bas à droite (version courte) ; au-delà, sur la barre de la fenêtre */ .pastille-flottante.fc-pastille { top: auto; bottom: -18px; right: 8px; animation-delay: 2.3s, 2.9s; } .fc-recup { display: none; } @media (min-width: 576px) { .pastille-flottante.fc-pastille { top: -18px; bottom: auto; right: 20px; } .fc-recup { display: inline; } } @media (min-width: 992px) and (max-width: 1199.98px) { .fc-recup { display: none; } } /* fenêtre étroite : la version longue couvrait son titre */ /* « dossiers », « tva » et « balance » : le conteneur reste en place, ce sont ses éléments qui s'animent */ .a-apparaitre[data-apparition="dossiers"], .a-apparaitre[data-apparition="tva"], .a-apparaitre[data-apparition="balance"] { opacity: 1; translate: none; } .fc-points li b { font-weight: 600; color: var(--jb-encre); } /* Les dossiers d'une fiduciaire (données fictives) : six chemises à onglet, et la fiche de celle qui est ouverte. Au défilement, les chemises se posent une à une, celle de Souss Négoce s'entoure de bordeaux, puis sa fiche arrive, champ par champ */ .fc-bureau { display: grid; gap: 18px; } .fc-chemises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; } @media (min-width: 576px) { .fc-chemises { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Les chemises et la fiche côte à côte seulement quand la place suffit : pas entre 992 et 1199 px, où le visuel partage la largeur avec le texte */ @media (min-width: 768px) and (max-width: 991.98px), (min-width: 1200px) { .fc-bureau { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; } .fc-chemises { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .fc-chemises li { --c: var(--jb-bleu); position: relative; display: grid; gap: 1px; min-width: 0; margin-top: 8px; padding: 11px 11px 10px; background: #fff; border: 1px solid var(--jb-ligne); border-top: 3px solid var(--c); border-radius: 0 10px 10px 10px; box-shadow: 0 6px 14px rgba(15, 26, 46, .06); } .fc-chemises li::before { content: ''; position: absolute; left: -1px; bottom: 100%; width: 44%; height: 8px; border-radius: 7px 7px 0 0; background: var(--c); } /* l'onglet */ .fc-chemises li:nth-child(2) { --c: var(--jb-turquoise); --delai: .08s; } .fc-chemises li:nth-child(3) { --c: var(--jb-sable); --delai: .16s; } .fc-chemises li:nth-child(4) { --c: var(--jb-crm); --delai: .24s; } .fc-chemises li:nth-child(5) { --c: #15803d; --delai: .32s; } .fc-chemises li:nth-child(6) { --c: #8a96a8; --delai: .4s; } .fc-chemises li.ouvert { --c: #7c2d3a; box-shadow: 0 0 0 2px #7c2d3a, 0 14px 28px rgba(124, 45, 58, .2); } .fc-chemises b { font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--jb-encre); } .fc-chemises small { font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--jb-texte); } .fc-chemises i { justify-self: start; margin-top: 6px; padding: .06rem .45rem; border-radius: 999px; font-size: .58rem; font-style: normal; font-weight: 700; color: var(--jb-texte); background: var(--jb-gris); } .fc-chemises .ouvert i { color: #fff; background: #7c2d3a; } .fc-fiche { padding: 16px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 18px; box-shadow: 0 32px 64px rgba(15, 26, 46, .14), 0 2px 6px rgba(15, 26, 46, .05); } .fc-fiche-tete { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--jb-ligne); } .fc-fiche-tete > span:last-child { min-width: 0; } .fc-fiche-logo { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: .85rem; font-weight: 800; color: #fff; background: #7c2d3a; } .fc-fiche-tete b { display: block; font-size: .95rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--jb-encre); } .fc-fiche-tete small { display: block; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--jb-texte); } .fc-fiche-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; } .fc-fiche-champs div { min-width: 0; padding: 7px 10px; border-radius: 10px; background: #f5f7fb; } .fc-fiche-champs dt { font-size: .58rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a96a8; } .fc-fiche-champs dd { margin: 0; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--jb-encre); } .fc-exercices { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; } .fc-exercices small { margin-right: 2px; font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a96a8; } .fc-exercices span { padding: .16rem .6rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: var(--jb-texte); background: var(--jb-gris); } .fc-exercices .actif { color: #fff; background: #7c2d3a; } .fc-fiche-champs div:nth-child(2) { --delai: .06s; } .fc-fiche-champs div:nth-child(3) { --delai: .12s; } .fc-fiche-champs div:nth-child(4) { --delai: .18s; } .fc-fiche-champs div:nth-child(5) { --delai: .24s; } .fc-fiche-champs div:nth-child(6) { --delai: .3s; } .fc-bureau.a-apparaitre .fc-chemises li { opacity: 0; translate: 0 14px; transition: opacity .4s ease var(--delai, 0s), translate .5s cubic-bezier(.2, .8, .2, 1) var(--delai, 0s); } .fc-bureau.a-apparaitre .fc-chemises li.ouvert { box-shadow: 0 6px 14px rgba(15, 26, 46, .06); transition: opacity .4s ease, translate .5s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease .7s; } .fc-bureau.a-apparaitre.apparu .fc-chemises li { opacity: 1; translate: 0 0; } .fc-bureau.a-apparaitre.apparu .fc-chemises li.ouvert { box-shadow: 0 0 0 2px #7c2d3a, 0 14px 28px rgba(124, 45, 58, .2); } .fc-bureau.a-apparaitre .fc-fiche { opacity: 0; translate: 0 18px; transition: opacity .5s ease .85s, translate .6s cubic-bezier(.2, .8, .2, 1) .85s; } .fc-bureau.a-apparaitre.apparu .fc-fiche { opacity: 1; translate: 0 0; } .fc-bureau.a-apparaitre .fc-fiche-champs div { opacity: 0; translate: 0 8px; transition: opacity .35s ease calc(var(--delai, 0s) + 1.05s), translate .45s cubic-bezier(.2, .8, .2, 1) calc(var(--delai, 0s) + 1.05s); } .fc-bureau.a-apparaitre.apparu .fc-fiche-champs div { opacity: 1; translate: 0 0; } .fc-bureau.a-apparaitre .fc-exercices .actif { scale: .4; transition: scale .45s cubic-bezier(.3, 1.6, .5, 1) 1.5s; } .fc-bureau.a-apparaitre.apparu .fc-exercices .actif { scale: 1; } /* Les cartes des états (déclaration, balance, bilan) : même en-tête */ .fc-carte-tete { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--jb-ligne); } .fc-carte-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: .95rem; color: #7c2d3a; background: #f6e9eb; } .fc-carte-titre { flex: 1; min-width: 0; } .fc-carte-titre b { display: block; font-size: .9rem; font-weight: 800; color: var(--jb-encre); } .fc-carte-titre small { display: block; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--jb-texte); } .fc-etat { flex: none; padding: .16rem .6rem; border-radius: 999px; font-size: .64rem; font-weight: 700; white-space: nowrap; color: var(--jb-vert); background: #ecfdf3; } /* La déclaration de TVA du trimestre (données fictives) : au défilement, ses lignes arrivent, la TVA due compte jusqu'à 7 550,00 DH, les factures oubliées sont signalées (1,5 s), puis le relevé des déductions sort en XML (1,9 s) */ .fc-declaration-zone { position: relative; width: min(100%, 470px); margin-inline: auto; padding-bottom: 44px; } /* le relevé ne chevauche que la marge du bas */ .fc-declaration { padding: 16px 16px 18px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 18px; box-shadow: 0 32px 64px rgba(15, 26, 46, .14), 0 2px 6px rgba(15, 26, 46, .05); } .fc-tva { list-style: none; margin: 0; padding: 0; } .fc-tva li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px dashed var(--jb-ligne); font-size: .8rem; color: var(--jb-texte); } .fc-tva b { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--jb-encre); } .fc-tva li:nth-child(2) { --delai: .1s; } .fc-tva li:nth-child(3) { --delai: .2s; } @property --fc-vm { syntax: ''; inherits: false; initial-value: 0; } @property --fc-vu { syntax: ''; inherits: false; initial-value: 0; } .fc-due { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #0f1524 0%, #1e2a4a 100%); box-shadow: 0 12px 24px rgba(15, 26, 46, .2); } .fc-due span { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); } .fc-due b { --fc-vm: 7; --fc-vu: 550; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; counter-reset: fc-vm var(--fc-vm) fc-vu var(--fc-vu); } .fc-due b::after { content: counter(fc-vm) "\A0" counter(fc-vu, qa-trois) ",00\A0 DH"; } /* qa-trois : les unités sur trois chiffres (page QahwaCRM) */ .fc-alerte { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 9px 12px; border: 1px solid #fde68a; border-radius: 12px; font-size: .74rem; font-weight: 600; color: #92400e; background: #fffbeb; } .fc-alerte .ico { color: #d97706; } .fc-xml { position: absolute; right: 10px; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 20px); padding: 10px 12px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 14px; box-shadow: 0 18px 36px rgba(15, 26, 46, .16); } .fc-xml-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; color: #fff; background: #7c2d3a; } .fc-xml-texte { min-width: 0; } .fc-xml-texte b { display: block; font-size: .78rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--jb-encre); } .fc-xml-texte small { display: block; font-size: .64rem; white-space: nowrap; color: var(--jb-texte); } .fc-xml-btn { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: .38rem .65rem; border-radius: 9px; font-size: .66rem; font-weight: 800; white-space: nowrap; color: #fff; background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); } @media (min-width: 768px) { .fc-xml { right: -22px; } } .fc-declaration-zone.a-apparaitre .fc-tva li { opacity: 0; translate: 0 8px; transition: opacity .4s ease calc(var(--delai, 0s) + .25s), translate .5s cubic-bezier(.2, .8, .2, 1) calc(var(--delai, 0s) + .25s); } .fc-declaration-zone.a-apparaitre.apparu .fc-tva li { opacity: 1; translate: 0 0; } .fc-declaration-zone.a-apparaitre .fc-due b { --fc-vm: 0; --fc-vu: 0; } .fc-declaration-zone.a-apparaitre.apparu .fc-due b { --fc-vm: 7; --fc-vu: 550; transition: --fc-vm 1.2s cubic-bezier(.2, .8, .2, 1) .55s, --fc-vu 1.2s cubic-bezier(.2, .8, .2, 1) .55s; } .fc-declaration-zone.a-apparaitre .fc-alerte { opacity: 0; scale: .92; transition: opacity .35s ease 1.5s, scale .45s cubic-bezier(.3, 1.5, .5, 1) 1.5s; } .fc-declaration-zone.a-apparaitre.apparu .fc-alerte { opacity: 1; scale: 1; } .fc-declaration-zone.a-apparaitre .fc-xml { opacity: 0; translate: 0 24px; transition: opacity .4s ease 1.9s, translate .55s cubic-bezier(.2, .9, .3, 1.1) 1.9s; } .fc-declaration-zone.a-apparaitre.apparu .fc-xml { opacity: 1; translate: 0 0; } /* La balance au 31/03 et le bilan 2025 (données fictives) : au défilement, les comptes arrivent un à un, les totaux comptent jusqu'à 256 300,00 des deux côtés (0,9 s), le contrôle ne trouve aucune incohérence (2,2 s) et le bilan se pose (1,9 s) */ .fc-etats { position: relative; } .fc-balance { padding: 16px 16px 58px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 18px; box-shadow: 0 32px 64px rgba(15, 26, 46, .14), 0 2px 6px rgba(15, 26, 46, .05); } .fc-table { width: 100%; border-collapse: collapse; font-size: .7rem; font-variant-numeric: tabular-nums; } .fc-table th { padding: 4px 5px 6px; border-bottom: 1px solid var(--jb-ligne); font-size: .54rem; font-weight: 700; letter-spacing: .08em; text-align: left; text-transform: uppercase; color: #8a96a8; } .fc-table td { padding: 4px 5px; border-bottom: 1px solid #f0f3f7; white-space: nowrap; color: var(--jb-texte); } .fc-table tbody td:first-child { font-weight: 700; color: #7c2d3a; } .fc-table td:nth-child(2) { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; } /* l'intitulé prend la place qui reste */ .fc-table th:nth-child(n+3), .fc-table td:nth-child(n+3) { text-align: right; } .fc-table td:nth-child(n+3) { font-weight: 600; color: var(--jb-encre); } .fc-table tfoot td { padding-top: 8px; border-top: 2px solid var(--jb-encre); border-bottom: 0; font-weight: 800; color: var(--jb-encre); } @property --fc-bm { syntax: ''; inherits: false; initial-value: 0; } @property --fc-bu { syntax: ''; inherits: false; initial-value: 0; } .fc-table .fc-bd, .fc-table .fc-bc { --fc-bm: 256; --fc-bu: 300; counter-reset: fc-bm var(--fc-bm) fc-bu var(--fc-bu); } .fc-bd::after, .fc-bc::after { content: counter(fc-bm) "\A0" counter(fc-bu, qa-trois) ",00"; } /* Le bilan : sur téléphone, sous la balance, qu'il chevauche ; au-delà, posé en bas à droite, et il dépasse */ .fc-bilan { position: relative; z-index: 1; width: min(calc(100% - 20px), 300px); margin: -44px 10px 0 auto; padding: 14px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 16px; box-shadow: 0 24px 48px rgba(15, 26, 46, .18); } .fc-bilan .fc-carte-tete { padding-bottom: 10px; } .fc-bilan-egal { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 10px; } .fc-bilan-egal span { min-width: 0; } .fc-bilan-egal small { display: block; font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a96a8; } .fc-bilan-egal b { display: block; font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--jb-encre); } .fc-bilan-egal span:last-child { text-align: right; } .fc-bilan-egal i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--jb-vert); background: #ecfdf3; } .fc-bilan-actions { display: flex; gap: 8px; } .fc-bilan-actions span { display: inline-flex; align-items: center; gap: 5px; padding: .35rem .7rem; border: 1px solid var(--jb-ligne); border-radius: 9px; font-size: .68rem; font-weight: 700; color: var(--jb-texte); } .fc-bilan-actions .fc-bilan-xml { border-color: transparent; color: #fff; background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); } @media (min-width: 768px) { .fc-etats { padding-bottom: 118px; } /* le bilan (environ 160 px) ne chevauche que la marge sous les totaux */ .fc-bilan { position: absolute; right: 0; bottom: 0; width: 290px; margin: 0; } } @media (min-width: 1200px) { .fc-bilan { right: -14px; } } .fc-table tbody tr:nth-child(2) { --delai: .05s; } .fc-table tbody tr:nth-child(3) { --delai: .1s; } .fc-table tbody tr:nth-child(4) { --delai: .15s; } .fc-table tbody tr:nth-child(5) { --delai: .2s; } .fc-table tbody tr:nth-child(6) { --delai: .25s; } .fc-table tbody tr:nth-child(7) { --delai: .3s; } .fc-table tbody tr:nth-child(8) { --delai: .35s; } .fc-table tbody tr:nth-child(9) { --delai: .4s; } .fc-table tbody tr:nth-child(10) { --delai: .45s; } .fc-table tbody tr:nth-child(11) { --delai: .5s; } .fc-etats.a-apparaitre tbody tr { opacity: 0; transition: opacity .35s ease calc(var(--delai, 0s) + .25s); } .fc-etats.a-apparaitre.apparu tbody tr { opacity: 1; } .fc-etats.a-apparaitre .fc-bd, .fc-etats.a-apparaitre .fc-bc { --fc-bm: 0; --fc-bu: 0; } .fc-etats.a-apparaitre.apparu .fc-bd, .fc-etats.a-apparaitre.apparu .fc-bc { --fc-bm: 256; --fc-bu: 300; transition: --fc-bm 1.3s cubic-bezier(.2, .8, .2, 1) .9s, --fc-bu 1.3s cubic-bezier(.2, .8, .2, 1) .9s; } .fc-etats.a-apparaitre .fc-balance .fc-etat { opacity: 0; scale: .6; transition: opacity .3s ease 2.2s, scale .45s cubic-bezier(.3, 1.5, .5, 1) 2.2s; } .fc-etats.a-apparaitre.apparu .fc-balance .fc-etat { opacity: 1; scale: 1; } .fc-etats.a-apparaitre .fc-bilan { opacity: 0; translate: 0 26px; transition: opacity .45s ease 1.9s, translate .6s cubic-bezier(.2, .9, .3, 1.1) 1.9s; } .fc-etats.a-apparaitre.apparu .fc-bilan { opacity: 1; translate: 0 0; } /* AtlasCRM ou FiduCompta : deux cartes, selon que l'on tient sa propre comptabilité ou celles de ses clients */ .fc-option { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.5rem; background: #fff; border: 1px solid var(--jb-ligne); border-radius: var(--jb-rayon); color: var(--jb-encre); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } a.fc-option:hover, a.fc-option:focus-visible { transform: translateY(-3px); box-shadow: var(--jb-ombre); border-color: #d6dde8; color: var(--jb-encre); } .fc-option.ici { border-color: var(--jb-turquoise); box-shadow: inset 0 0 0 1px var(--jb-turquoise); } .fc-option-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; color: var(--jb-bleu); background: #eef3fb; } .ici .fc-option-ic { color: #7c2d3a; background: #f6e9eb; } .fc-option-qui { margin-top: .35rem; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--jb-turquoise-texte); } .fc-option-nom { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--jb-bleu); } .fc-option-nom .badge-sable { position: static; } .fc-option-liste { display: grid; gap: .45rem; margin: .15rem 0 .35rem; } .fc-option-liste span { display: flex; align-items: flex-start; gap: .55rem; color: var(--jb-texte); } .fc-option-liste .ico { margin-top: .2em; color: var(--jb-turquoise-texte); } .fc-option .lien-fleche { margin-top: auto; color: var(--jb-bleu); } a.fc-option:hover .lien-fleche .ico { translate: 4px 0; } .fc-choix > .col-md-6 + .col-md-6 { --delai: .1s; } /* ==================== Page Sur mesure ==================== */ /* Deux états au même endroit, partout sur la page : celui d'avant (.pj-avant) cède la place à celui d'après (.pj-apres). Sans animation, seul l'état d'après s'affiche. */ .pj-bascule { display: inline-grid; justify-items: end; vertical-align: top; } .pj-bascule > * { grid-area: 1 / 1; } .pj-avant { opacity: 0; } .etat .ico { font-size: .9em; vertical-align: -.12em; } .etat-avenir { background: #f1f4f8; color: #64748b; } /* Le suivi du projet, dessiné (données fictives) : six modules. Le message de la cliente arrive (1,25 s), le 3e passe de « En test » à « Validé » (1,85 s), le compteur et la jauge avancent, puis le 4e démarre (2,25 s). Tout est en place à 2,6 s. */ .fenetre-barre .pj-client { display: inline; margin-left: auto; min-width: 0; /* visible sur téléphone aussi, contrairement à la page Dolibarr */ font-size: .7rem; color: var(--jb-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pj-corps { display: grid; gap: 10px; padding: 14px 14px 48px; background: #f5f7fb; } /* en bas, la place du message qui chevauche la fenêtre */ .pj-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .75rem; animation: jb-leve .5s ease .4s both; } .pj-tete b { font-size: .9rem; font-weight: 700; color: var(--jb-encre); } .pj-tete small { font-size: .7rem; white-space: nowrap; color: var(--jb-texte); } .pj-tete .pj-bascule { font-weight: 800; color: var(--jb-vert); } .pj-jauge { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: #e3e8f0; } .pj-jauge i { display: block; width: 50%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--jb-turquoise), var(--jb-vert)); animation: pj-jauge 1.9s cubic-bezier(.4, 0, .2, 1) .7s both; } @keyframes pj-jauge { 0% { width: 0; } 26% { width: 33.33%; } 63% { width: 33.33%; } 100% { width: 50%; } } /* 2 modules sur 6 à 1,2 s, 3 à 2,6 s */ .pj-modules { list-style: none; margin: 0; padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 12px; } .pj-modules li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border-top: 1px solid var(--jb-ligne); animation: jb-leve .45s ease both; } .pj-modules li:first-child { border-top: 0; } /* Couleurs écrites en clair, sans color-mix() : Chromium passe au jaune vif en animant une couleur vers un color-mix() */ .pj-ic { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; color: #94a3b8; background: #f1f4f8; } .pj-m1 .pj-ic, .pj-m2 .pj-ic, .pj-m3 .pj-ic { color: var(--jb-vert); background: #e3f1e8; } .pj-m4 .pj-ic { color: var(--jb-crm); background: var(--jb-crm-clair); } .pj-nom { min-width: 0; display: grid; line-height: 1.3; } .pj-nom b { font-size: .78rem; font-weight: 600; color: var(--jb-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pj-nom small { font-size: .66rem; color: var(--jb-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pj-modules li:nth-child(1) { animation-delay: .45s; } .pj-modules li:nth-child(2) { animation-delay: .52s; } .pj-modules li:nth-child(3) { animation-delay: .59s; } .pj-modules li:nth-child(4) { animation-delay: .66s; } .pj-modules li:nth-child(5) { animation-delay: .73s; } .pj-modules li:nth-child(6) { animation-delay: .8s; } /* Le module qui démarre : le liseré bleu des CRM */ .pj-modules li.pj-m4 { background: #f7f8ff; box-shadow: inset 3px 0 0 var(--jb-crm); } /* Les bascules (placées après les délais ci-dessus) : la ligne du 3e s'éclaire en vert et son icône passe de l'orange au vert ; puis le 4e s'allume */ @keyframes pj-sort { from { opacity: 1; } to { opacity: 0; } } @keyframes pj-valide { 40% { background: #e3f8eb; } } @keyframes pj-actif { from { background: #fff; box-shadow: inset 0 0 0 var(--jb-crm); } } @keyframes pj-ic-test { from { color: #b45309; background: #fff7ed; } } @keyframes pj-ic-avenir { from { color: #94a3b8; background: #f1f4f8; } } .pj-zone .pj-avant { animation: pj-sort .25s ease both; } .pj-zone .pj-apres { animation: jb-apparait .3s ease both; } .pj-m3 .pj-avant { animation-delay: 1.85s; } .pj-m3 .pj-apres { animation-delay: 1.9s; } .pj-tete .pj-avant { animation-delay: 1.95s; } .pj-tete .pj-apres { animation-delay: 2s; } .pj-m4 .pj-avant { animation-delay: 2.25s; } .pj-m4 .pj-apres { animation-delay: 2.3s; } .pj-modules li.pj-m3 { animation: jb-leve .45s ease .59s both, pj-valide 1s ease 1.85s; } .pj-modules li.pj-m4 { animation: jb-leve .45s ease .66s both, pj-actif .4s ease 2.25s both; } .pj-m3 .pj-ic { animation: pj-ic-test .3s ease 1.9s both; } .pj-m4 .pj-ic { animation: pj-ic-avenir .3s ease 2.3s both; } /* Le message de la cliente : sur téléphone, sous la fenêtre, qu'il chevauche ; au-delà, en bas à gauche, et il dépasse */ .pj-message { position: relative; z-index: 2; width: min(86%, 290px); margin: -34px 12px 0 auto; padding: 9px 12px 7px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 14px 14px 14px 4px; box-shadow: 0 18px 36px rgba(15, 26, 46, .16); transform-origin: 0 100%; animation: jb-ouvre .5s cubic-bezier(.2, .9, .3, 1.2) 1.25s both, jb-flotte 6s ease-in-out 2.8s infinite; } .pj-de { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; color: var(--jb-vert); } .pj-message p { margin: 3px 0 0; font-size: .8rem; line-height: 1.4; color: var(--jb-encre); } .pj-message time { display: block; margin-top: 1px; text-align: right; font-size: .62rem; color: var(--jb-texte); } @media (min-width: 992px) { .pj-message { position: absolute; left: -34px; bottom: -30px; width: 272px; margin: 0; } } /* La boucle des modules, côté texte : ses trois étapes numérotées, aux couleurs du schéma */ .pj-boucle-etapes { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 1rem; } .pj-boucle-etapes li { display: flex; align-items: flex-start; gap: .9rem; color: var(--jb-texte); } .pj-boucle-etapes b { display: block; font-weight: 700; color: var(--jb-encre); } .pj-num { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; font-weight: 800; color: var(--jb-bleu); background: #eef3fb; } .pj-boucle-etapes li:nth-child(2) .pj-num { color: #b45309; background: #fff7ed; } .pj-boucle-etapes li:nth-child(3) .pj-num { color: var(--jb-vert); background: #ecfdf3; } /* « conv », « temps » et « boucle » : le conteneur reste en place, ce sont ses éléments qui s'animent. Les transitions sont sur l'état « apparu » : rien ne bouge quand site.js prépare l'apparition, au chargement. */ .a-apparaitre[data-apparition="conv"], .a-apparaitre[data-apparition="temps"], .a-apparaitre[data-apparition="boucle"] { opacity: 1; translate: none; } /* La conversation de départ, sur WhatsApp (données fictives) : au défilement, les messages arrivent un à un (--d), le vocal se lit, « … » s'affiche le temps que j'écrive, puis ma réponse arrive (2,45 s). Sans animation, toute la conversation s'affiche. */ .pj-conv { max-width: 470px; margin-inline: auto; overflow: hidden; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 20px; box-shadow: 0 32px 64px rgba(15, 26, 46, .14), 0 2px 6px rgba(15, 26, 46, .05); } .pj-conv-tete { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--jb-ligne); } .pj-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; font-weight: 700; color: #8a5a2b; background: var(--jb-sable-clair); } .pj-conv-tete b { display: block; font-size: .84rem; font-weight: 700; color: var(--jb-encre); } .pj-conv-tete small { display: block; font-size: .68rem; color: var(--jb-vert); } .pj-conv-tete > .ico { margin-left: auto; font-size: 1.15rem; color: var(--jb-vert); } .pj-fil { position: relative; display: grid; gap: 8px; padding: 14px 14px 16px; background: #f3eee5; } .pj-jour { justify-self: center; margin: 0 0 2px; padding: .15rem .65rem; border-radius: 999px; font-size: .64rem; font-weight: 600; color: var(--jb-texte); background: #fff; box-shadow: 0 1px 2px rgba(15, 26, 46, .06); } .pj-bulle { position: relative; max-width: 84%; padding: 7px 10px 5px; border-radius: 12px; font-size: .8rem; line-height: 1.4; color: var(--jb-encre); box-shadow: 0 1px 2px rgba(15, 26, 46, .1); } .pj-recu { justify-self: start; background: #fff; border-top-left-radius: 4px; transform-origin: 0 0; } .pj-envoye { justify-self: end; background: #d7f1f2; border-top-right-radius: 4px; transform-origin: 100% 0; } .pj-bulle p { margin: 0; } .pj-bulle time { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 2px; font-size: .6rem; color: var(--jb-texte); } .pj-bulle time .ico { font-size: .9rem; color: #0ea5e9; } /* Le vocal : la lecture, l'onde (la partie déjà écoutée en turquoise), le micro et la durée */ .pj-vocal { display: flex; align-items: center; gap: 9px; width: 228px; max-width: 100%; } .pj-lecture { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .95rem; color: #fff; background: var(--jb-turquoise-texte); } .pj-lecture .ico { translate: 1px 0; } .pj-onde { position: relative; flex: 1; height: 24px; } .pj-onde svg { position: absolute; inset: 0; width: 100%; height: 100%; } .pj-onde rect { fill: #c3ccd8; } .pj-onde .pj-joue rect { fill: var(--jb-turquoise-texte); } .pj-joue { clip-path: inset(0 40% 0 0); } .pj-micro { display: grid; justify-items: center; gap: 1px; font-size: .8rem; color: var(--jb-turquoise-texte); } .pj-micro small { font-size: .6rem; color: var(--jb-texte); } /* La photo du cahier des apports : une page réglée, écrite à la main (Caveat, la police du bloc « Sur mesure ») */ .pj-photo { padding: 4px 4px 5px; } .pj-cahier { display: grid; align-content: start; width: 220px; max-width: 100%; aspect-ratio: 4 / 3; padding: 4px 16px 0 36px; border-radius: 9px; rotate: -1.5deg; font-family: 'Caveat', cursive; font-weight: 600; font-size: 18px; line-height: 22px; color: #2b55b4; background: linear-gradient(90deg, transparent 27px, #f0c9a8 27px 28.5px, transparent 28.5px), repeating-linear-gradient(180deg, #fffdf7 0 21px, #dfe8f5 21px 22px); box-shadow: inset 0 0 26px rgba(120, 90, 40, .2); } .pj-cahier > span { display: flex; justify-content: space-between; gap: 10px; } .pj-cahier > span:first-child { color: #a8622a; text-decoration: underline; text-underline-offset: 3px; } .pj-cahier b { font-weight: 600; } .pj-legende { display: block; padding: 6px 6px 0; } .pj-photo time { padding-right: 6px; } /* Le fichier Excel */ .pj-fichier { display: flex; align-items: center; gap: 10px; width: 210px; max-width: 100%; padding: 7px 9px; border-radius: 9px; background: #f5f7fb; } .pj-fichier > .ico { font-size: 1.7rem; color: #1d6f42; } .pj-fichier b { display: block; font-size: .78rem; font-weight: 600; } .pj-fichier small { display: block; font-size: .64rem; color: var(--jb-texte); } /* « … » : j'écris, à la place de ma réponse, le temps qu'elle arrive */ .pj-ecrit { position: absolute; right: 14px; bottom: 16px; display: flex; gap: 4px; padding: 11px 13px; border-radius: 12px 4px 12px 12px; background: #d7f1f2; box-shadow: 0 1px 2px rgba(15, 26, 46, .1); opacity: 0; } .pj-ecrit i { width: 6px; height: 6px; border-radius: 50%; background: var(--jb-turquoise-texte); opacity: .45; } .pj-b1 { --d: .2s; } .pj-b2 { --d: .85s; } .pj-b3 { --d: 1.25s; } .pj-b4 { --d: 2.45s; } @keyframes pj-ecrit { 0%, 100% { opacity: 0; } 12%, 88% { opacity: 1; } } @keyframes pj-saute { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -4px; opacity: 1; } } .pj-conv.a-apparaitre .pj-bulle { opacity: 0; translate: 0 10px; scale: .94; } .pj-conv.a-apparaitre.apparu .pj-bulle { opacity: 1; translate: 0 0; scale: 1; transition: opacity .35s ease var(--d), translate .45s cubic-bezier(.2, .8, .2, 1) var(--d), scale .45s cubic-bezier(.2, .8, .2, 1) var(--d); } .pj-conv.a-apparaitre .pj-joue { clip-path: inset(0 100% 0 0); } .pj-conv.a-apparaitre.apparu .pj-joue { clip-path: inset(0 40% 0 0); transition: clip-path 1.2s linear .5s; } .pj-conv.a-apparaitre.apparu .pj-ecrit { animation: pj-ecrit .8s ease 1.65s both; } .pj-conv.a-apparaitre.apparu .pj-ecrit i { animation: pj-saute .5s ease-in-out 1.7s 2; } .pj-conv.a-apparaitre.apparu .pj-ecrit i:nth-child(2) { animation-delay: 1.8s; } .pj-conv.a-apparaitre.apparu .pj-ecrit i:nth-child(3) { animation-delay: 1.9s; } /* Le même projet dans le temps (schéma) : au défilement, le curseur du temps avance de gauche à droite en 2,4 s. D'un seul bloc, la barre de développement se remplit et la livraison n'arrive qu'au bout. Module par module, chaque segment est livré puis coché à son tour (--d), et la bande « En service » démarre dès le premier. Sans animation, le schéma s'affiche terminé. */ .pj-temps { padding: 18px 18px 16px; background: #fff; border: 1px solid var(--jb-ligne); border-radius: 18px; box-shadow: 0 32px 64px rgba(15, 26, 46, .12), 0 2px 6px rgba(15, 26, 46, .05); } .pj-temps-tete { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: 16px; } .pj-temps-tete b { font-size: .92rem; font-weight: 700; color: var(--jb-encre); } .pj-temps-tete span { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 600; white-space: nowrap; color: var(--jb-texte); } .pj-pistes { position: relative; display: grid; gap: 20px; } .pj-voie-nom { margin: 0 0 7px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jb-texte); } .pj-voie-modules .pj-voie-nom { color: var(--jb-turquoise-texte); } .pj-voie-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .78rem; color: var(--jb-texte); } .pj-voie-modules .pj-voie-note { font-weight: 500; color: var(--jb-encre); } .pj-voie-modules .pj-voie-note .ico { color: var(--jb-vert); } .pj-piste { display: flex; gap: 4px; height: 40px; } .pj-dev { position: relative; flex: 1; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #f1f4f8; } .pj-dev i { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #d9dfe8 0 6px, #e7ebf1 6px 12px); } .pj-dev b { position: relative; font-size: .72rem; font-weight: 600; color: var(--jb-texte); } .pj-livraison { flex: 0 0 17%; display: grid; place-items: center; border-radius: 9px; font-size: .68rem; font-weight: 700; color: #fff; background: #8a96a8; } @media (max-width: 575.98px) { .pj-livraison { font-size: .58rem; } } .pj-segments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); } .pj-segments li { position: relative; display: grid; place-items: center; border-radius: 9px; background: #f1f4f8; } .pj-segments li > i { position: absolute; inset: 0; border-radius: inherit; background: var(--jb-turquoise-clair); box-shadow: inset 0 0 0 1.5px var(--jb-turquoise); } .pj-segments li > .ico { position: relative; font-size: 1rem; color: var(--jb-turquoise-texte); } .pj-coche { position: absolute; top: -7px; right: -5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; color: #fff; background: var(--jb-vert); box-shadow: 0 0 0 2px #fff; } /* La bande « En service » part de la fin du 1er segment : (largeur − 5 espaces de 4 px) / 6, plus un espace */ .pj-usage { display: flex; align-items: center; gap: 6px; height: 24px; margin: 6px 0 0 calc((100% - 20px) / 6 + 4px); padding: 0 10px; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap; color: var(--jb-vert); background: #ecfdf3; box-shadow: inset 0 0 0 1px #bbf7d0; } .pj-curseur { position: absolute; top: 18px; bottom: 26px; left: 100%; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--jb-bleu); opacity: 0; pointer-events: none; } .pj-curseur::before { content: ''; position: absolute; top: -4px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--jb-bleu); box-shadow: 0 0 0 4px rgba(4, 53, 129, .14); } .pj-s1 { --d: .2s; } .pj-s2 { --d: .6s; } .pj-s3 { --d: 1s; } .pj-s4 { --d: 1.4s; } .pj-s5 { --d: 1.8s; } .pj-s6 { --d: 2.2s; } .pj-temps.a-apparaitre .pj-curseur { left: 0; opacity: 1; } .pj-temps.a-apparaitre.apparu .pj-curseur { left: 100%; opacity: 0; transition: left 2.4s linear .2s, opacity .3s ease 2.65s; } .pj-temps.a-apparaitre .pj-dev i { clip-path: inset(0 100% 0 0); } .pj-temps.a-apparaitre.apparu .pj-dev i { clip-path: inset(0 0 0 0); transition: clip-path 1.99s linear .2s; } /* la barre fait 83 % de la piste : 83 % de 2,4 s */ .pj-temps.a-apparaitre .pj-livraison { opacity: .25; scale: .85; } .pj-temps.a-apparaitre.apparu .pj-livraison { opacity: 1; scale: 1; transition: opacity .3s ease 2.25s, scale .45s cubic-bezier(.3, 1.6, .5, 1) 2.25s; } .pj-temps.a-apparaitre .pj-segments li > i { clip-path: inset(0 100% 0 0); } .pj-temps.a-apparaitre.apparu .pj-segments li > i { clip-path: inset(0 0 0 0); transition: clip-path .4s linear var(--d); } .pj-temps.a-apparaitre .pj-segments li > .ico { color: #a7b1c0; } .pj-temps.a-apparaitre.apparu .pj-segments li > .ico { color: var(--jb-turquoise-texte); transition: color .2s ease var(--d); } .pj-temps.a-apparaitre .pj-coche { opacity: 0; scale: .3; } .pj-temps.a-apparaitre.apparu .pj-coche { opacity: 1; scale: 1; transition: opacity .2s ease calc(var(--d) + .4s), scale .4s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d) + .4s); } .pj-temps.a-apparaitre .pj-usage { clip-path: inset(0 100% 0 0); } .pj-temps.a-apparaitre.apparu .pj-usage { clip-path: inset(0 0 0 0); transition: clip-path 2s linear .6s; } /* La boucle de chaque module (schéma) : l'anneau du logo et ses trois étapes, à −90°, 30° et 150° (positions calculées dans la page). Au défilement, les étapes s'ouvrent ; les flèches se dessinent l'une après l'autre, avec le point qui fait un premier tour en 1,5 s, et chaque étape s'éclaire quand il l'atteint. Au bout du tour, le module 3 laisse la place au module 4 (2,25 s), puis le point continue, lentement. Sans animation, la boucle s'affiche entière, sur le module 4, sans le point. */ .pj-boucle { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; } .pj-boucle::before { content: ''; position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(2, 159, 167, .12), rgba(4, 53, 129, .05) 65%, transparent); } .pj-boucle > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .pj-anneau { fill: none; stroke: #d3dde9; stroke-width: .35; stroke-dasharray: 1.2 1.6; } .pj-arc, .pj-pointe { fill: none; stroke: var(--jb-turquoise); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; } .pj-arc { stroke-dasharray: 1 1.02; } .pj-tour { position: absolute; inset: 12%; z-index: 1; border-radius: 50%; pointer-events: none; animation: jb-tourne 30s linear infinite; } /* rayon 38 % : celui de l'anneau */ .pj-tour::before { content: ''; position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--jb-turquoise); box-shadow: 0 0 0 5px rgba(2, 159, 167, .16); } .pj-station { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); } .pj-st1 { left: 50%; top: 12%; } .pj-st2 { left: 82.91%; top: 69%; } .pj-st3 { left: 17.09%; top: 69%; } .pj-disque { --c: var(--jb-bleu); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; color: var(--c); background: #fff; border: 2px solid color-mix(in srgb, var(--c) 35%, #fff); box-shadow: 0 14px 30px rgba(15, 26, 46, .12), inset 0 0 0 5px #fff, inset 0 0 0 100px color-mix(in srgb, var(--c) 7%, #fff); } .pj-st2 .pj-disque { --c: #b45309; } .pj-st3 .pj-disque { --c: var(--jb-vert); } .pj-etiquette { position: relative; margin-top: -.6rem; padding: .1rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; color: var(--jb-encre); background: #fff; border: 1px solid var(--jb-ligne); box-shadow: 0 4px 10px rgba(15, 26, 46, .06); } .pj-centre { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 44%; display: grid; justify-items: center; gap: 9px; text-align: center; } .pj-centre-module { justify-items: center; } .pj-centre-module small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--jb-turquoise-texte); } .pj-centre-module b { display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--jb-bleu); } .pj-points { display: flex; gap: 6px; } .pj-points i { width: 8px; height: 8px; border-radius: 50%; background: #d3dde9; } .pj-points i:nth-child(-n+3) { background: var(--jb-vert); } .pj-suivant { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--jb-texte); } .pj-suivant .ico { color: var(--jb-turquoise-texte); } @media (min-width: 576px) { .pj-disque { width: 70px; height: 70px; font-size: 1.6rem; } .pj-etiquette { font-size: .78rem; } .pj-centre-module b { font-size: 1.55rem; } } .pj-st1 { --d: .1s; } .pj-st2 { --d: .22s; } .pj-st3 { --d: .34s; } .pj-f1 { --d: .7s; } .pj-f2 { --d: 1.2s; } .pj-f3 { --d: 1.7s; } @keyframes pj-premier-tour { from { rotate: 0deg; } to { rotate: 360deg; } } @keyframes pj-pouls { 45% { scale: 1.14; } } .pj-boucle.a-apparaitre .pj-station { opacity: 0; scale: .5; } .pj-boucle.a-apparaitre.apparu .pj-station { opacity: 1; scale: 1; transition: opacity .4s ease var(--d), scale .5s cubic-bezier(.2, .9, .3, 1.2) var(--d); } .pj-boucle.a-apparaitre .pj-arc { stroke-dashoffset: 1.01; } /* trou de 1,02 et décalage de 1,01 : pas de point au départ d'un trait pas encore dessiné */ .pj-boucle.a-apparaitre.apparu .pj-arc { stroke-dashoffset: 0; transition: stroke-dashoffset .5s linear var(--d); } .pj-boucle.a-apparaitre .pj-pointe { opacity: 0; } .pj-boucle.a-apparaitre.apparu .pj-pointe { opacity: 1; transition: opacity .12s ease calc(var(--d) + .45s); } .pj-boucle.a-apparaitre.apparu .pj-st2 .pj-disque { animation: pj-pouls .45s ease 1.2s; } .pj-boucle.a-apparaitre.apparu .pj-st3 .pj-disque { animation: pj-pouls .45s ease 1.7s; } .pj-boucle.a-apparaitre.apparu .pj-st1 .pj-disque { animation: pj-pouls .45s ease 2.2s; } .pj-boucle.a-apparaitre .pj-tour { opacity: 0; animation: none; } .pj-boucle.a-apparaitre.apparu .pj-tour { opacity: 1; transition: opacity .2s ease .65s; animation: pj-premier-tour 1.5s linear .7s both, jb-tourne 30s linear 2.2s infinite; } .pj-boucle.a-apparaitre .pj-avant { opacity: 1; translate: 0 0; } .pj-boucle.a-apparaitre .pj-apres { opacity: 0; translate: 0 8px; } .pj-boucle.a-apparaitre.apparu .pj-avant { opacity: 0; translate: 0 -8px; transition: opacity .25s ease 2.25s, translate .35s ease 2.25s; } .pj-boucle.a-apparaitre.apparu .pj-apres { opacity: 1; translate: 0 0; transition: opacity .3s ease 2.35s, translate .4s cubic-bezier(.2, .8, .2, 1) 2.35s; } .pj-boucle.a-apparaitre .pj-points i:nth-child(3) { background: #d3dde9; } .pj-boucle.a-apparaitre.apparu .pj-points i:nth-child(3) { background: var(--jb-vert); transition: background .3s ease 2.25s; } /* L'orbite des logiciels issus d'AtlasCRM, avec une place libre en pointillés : votre logiciel (inc/bloc-famille.php, $place_libre) */ .famille-libre .fam-disque { color: var(--jb-turquoise-texte); background: #fff; border: 2px dashed var(--jb-turquoise); box-shadow: 0 14px 30px rgba(2, 159, 167, .14); } .famille-libre .fam-nom { color: var(--jb-turquoise-texte); border-color: #bfe6e8; } /* ---------- Pied de page ---------- */ .pied { background: var(--jb-gris); border-top: 1px solid var(--jb-ligne); padding: 3.5rem 0 1.5rem; color: var(--jb-texte); font-size: .93rem; } .pied-titre { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jb-encre); margin-bottom: .8rem; } .pied li { margin-bottom: .35rem; } .pied a:not(.marque) { color: var(--jb-texte); text-decoration: none; overflow-wrap: anywhere; } .pied a:not(.marque):hover { color: var(--jb-bleu); text-decoration: underline; } .pied-bas { border-top: 1px solid var(--jb-ligne); margin: 2.5rem 0 0; padding-top: 1.25rem; font-size: .85rem; } /* Qui est derrière le site : la photo, ronde comme le logo, cerclée de turquoise, et un petit paragraphe */ .pied-moi { display: flex; align-items: flex-start; gap: 1.1rem; margin-top: 1.2rem; } .pied-photo { width: 64px; height: 64px; flex: none; margin: 5px 0 0 5px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--jb-turquoise); } .pied-moi p { margin: 0; line-height: 1.6; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mascotte, .anneau, .arc, .medaillon, .medaillon-disque { animation: none; } .hero .surtitre, .titre-hero .mot > span, .titre-hero .point, .hero .filet, .hero-intro, .hero-actions, .benefices li, .brille::before { animation: none; } .publics, .fenetre-zone, .fm, .compteur, .graphe .aire, .graphe .ligne, .graphe .point-graphe, .doc, .pastille-flottante, .video-lecture::before, .famille-sat .fam-disque { animation: none; } .doli-menu > span, .doli-menu .doli-nouveau, .doli-modules li, .doli-modules .doli-votre, .doli-votre .interrupteur, .doli-votre .interrupteur::after { animation: none; } .ink-onglets li, .ink-machine, .ink-colonnes, .ink-conso li, .ink-conso li.ink-ajoute, .ink-ajoute .ink-stock, .ink-ajoute .ink-btn, .ink-ajoute .ink-btn .ico:first-child, .ink-ajoute .ink-btn .ico + .ico, .compteur-panier, .ink-suggestions, .compat-sat .cp-disque { animation: none; } .tel-zone, .tel-anneau, .tel-arc, .tel-sat, .tel-titre, .tel-agenda li, .tel-agenda li.actif, .tel-toast { animation: none; } .nom-sens, .as-saisie, .as-invite, .as-code, .as-pret::before, .as-lignes li, .as-lignes li.as-nouvelle, .as-ticket, .as-encaisser, .as-boite, .as-laser { animation: none; } .qa-familles, .qa-tuiles li, .qa-tuiles li.qa-tape-1, .qa-tuiles li.qa-tape-3, .qa-tuiles li.qa-tape-4, .qa-tape::after, .qa-tape-1::after, .qa-tape-3::after, .qa-tape-4::after, .qa-nb, .qa-tape-1 .qa-nb, .qa-commande, .qa-imprimer, .qa-lignes li, .qa-lignes .qa-l1, .qa-lignes .qa-l2, .qa-lignes .qa-l3, .qa-zone .qa-imprimante, .qa-zone .qa-papier, .qa-zone .qa-led { animation: none; } .fc-dossier, .fc-facture, .fc-fl-ht, .fc-fl-tva, .fc-fl-ttc, .fc-ecriture, .fc-lignes li, .fc-lignes .fc-l1, .fc-lignes .fc-l2, .fc-lignes .fc-l3, .fc-totaux, .fc-equilibre { animation: none; } .pj-tete, .pj-jauge i, .pj-modules li, .pj-modules li.pj-m3, .pj-modules li.pj-m4, .pj-zone .pj-avant, .pj-zone .pj-apres, .pj-m3 .pj-ic, .pj-m4 .pj-ic, .pj-message { animation: none; } .pj-tour { display: none; } .tel-satellite { display: none; } .satellite { display: none; } .a-apparaitre, .a-apparaitre .point, .preuve.a-apparaitre > .ico, .etapes li.a-apparaitre::after { opacity: 1; translate: none; scale: 1; transition: none; } .carte-logiciel, .barre { transition: none; } .carte-logiciel:hover, .carte-logiciel:focus-within { transform: none; } }