/* GestaPro — vitrine : compléments propres à GestaPro. Couleurs = logo officiel Gesta Pro : G en dégradé chaud (rose → corail → jaune), P en dégradé froid (violet → bleu → cyan), texte anthracite. */ :root { --gp-warm:linear-gradient(100deg, #f61a74 0%, #fe5c4a 55%, #fec425 100%); --gp-cool:linear-gradient(100deg, #6317dd 0%, #2b75f3 55%, #04cafd 100%); --gp-spectrum:linear-gradient(90deg, #fec425, #fe5c4a 20%, #f61a74 40%, #6317dd 60%, #2b75f3 80%, #04cafd); --gradient:linear-gradient(110deg, #f61a74, #fe5c4a); } /* filet aux couleurs du logo en haut de l'en-tête et du pied de page */ .site-header { border-top:3px solid transparent; border-image:var(--gp-spectrum) 1; } .studio-footer { position:relative; } .studio-footer::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; border-radius:99px; background:var(--gp-spectrum); opacity:.85; } /* titres « accent » : dégradé chaud du G ; surtitres : du rose du G au violet du P */ .accent { background:var(--gp-warm); -webkit-background-clip:text; background-clip:text; color:transparent; } .eyebrow { background:linear-gradient(90deg, #f61a74, #6317dd); -webkit-background-clip:text; background-clip:text; color:transparent; width:fit-content; } /* ---------- logo GestaPro (format paysage) ---------- */ .site-header .brand { width:clamp(140px, 13vw, 190px); } .site-header .brand img { width:100%; height:auto; aspect-ratio:1595/350; } .studio-footer > a img { width:190px; height:auto; aspect-ratio:1595/350; } /* ---------- connexion à l'application : même gabarit que l'appel à l'action, jamais sur deux lignes ---------- */ .header-actions { align-items:center; } .hdr-tools { display:flex; align-items:center; gap:10px; } .site-header .theme-toggle { width:44px; height:44px; border-radius:8px; } .hdr-login { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:44px; padding:0 18px; border-radius:8px; white-space:nowrap; flex-shrink:0; border:1.5px solid var(--line); background:#fff; color:var(--ink); font-weight:700; font-size:14px; line-height:1; transition:border-color .2s, color .2s, box-shadow .2s; } .hdr-login:hover { color:var(--pink-text); border-color:transparent; background:linear-gradient(#fff, #fff) padding-box, var(--gp-spectrum) border-box; box-shadow:0 10px 22px -16px rgba(43,117,243,.6); } .hdr-login .icon { width:18px; height:18px; flex:none; } .site-header .header-actions > .btn { height:44px; min-height:44px; padding-top:0; padding-bottom:0; white-space:nowrap; } .site-nav .nav-login { display:none; } @media (max-width:1240px) { .hdr-login { width:44px; padding:0; } .hdr-login span { display:none; } } @media (max-width:900px) { .hdr-login { display:none; } .site-nav .nav-login { display:inline-flex; align-items:center; gap:8px; } .site-nav .nav-login .icon { width:18px; } } html[data-theme="dark"] .hdr-login:hover { background:linear-gradient(#141833, #141833) padding-box, var(--gp-spectrum) border-box; color:#fff; } /* ---------- captures d'écran réelles dans un cadre de navigateur ---------- */ .gp-screen { margin:0; border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -28px rgba(11,16,68,.38), 0 10px 22px -16px rgba(246,26,116,.35); } .gp-screen-bar { display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#f4f5fa; border-bottom:1px solid var(--line); } .gp-screen-bar i { width:9px; height:9px; border-radius:50%; background:#d9dce6; } .gp-screen-bar i:first-child { background:#ff6b8b; } .gp-screen-bar i:nth-child(2) { background:#ffc04d; } .gp-screen-bar i:nth-child(3) { background:#4ade9a; } .gp-screen-bar span { margin-inline-start:10px; font-size:11px; color:#8a91a3; letter-spacing:.2px; } .gp-screen img { display:block; width:100%; height:auto; } /* ---------- visite guidée ---------- */ .gp-tour { padding:100px 0 40px; } .gp-tour-row { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:56px; align-items:center; margin-top:56px; } .gp-tour-row.is-reverse .gp-screen { order:2; } .gp-tour-copy h3 { font-size:clamp(24px, 2.2vw, 32px); letter-spacing:-1px; margin-bottom:14px; } .gp-tour-copy > p:not(.eyebrow) { margin-bottom:20px; } @media (max-width:900px) { .gp-tour-row { grid-template-columns:1fr; gap:26px; } .gp-tour-row.is-reverse .gp-screen { order:0; } } /* ---------- fonctions transverses ---------- */ .gp-extras { padding:70px 0 90px; } .gp-extras-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; } .gp-extra { padding:26px; border-radius:20px; border:1px solid var(--line); background:#fff; box-shadow:0 18px 40px -34px rgba(11,16,68,.4); } .gp-extra .iconbox { margin-bottom:16px; } .gp-extra h3 { font-size:19px; margin-bottom:8px; } .gp-extra p { font-size:15px; } .gp-duo { position:relative; margin:56px auto 0; max-width:1000px; padding-inline-end:120px; } .gp-phone { position:absolute; right:0; bottom:-30px; width:220px; margin:0; border-radius:30px; overflow:hidden; border:8px solid #0b1044; box-shadow:0 30px 60px -24px rgba(11,16,68,.55); background:#fff; } .gp-phone img { display:block; width:100%; height:auto; } @media (max-width:900px) { .gp-extras-grid { grid-template-columns:1fr 1fr; } } @media (max-width:640px) { .gp-extras-grid { grid-template-columns:1fr; } .gp-duo { padding-inline-end:0; } .gp-phone { position:relative; right:auto; bottom:auto; width:62%; margin:-60px 0 0 auto; } } /* ---------- page Fonctionnalités ---------- */ .gp-ft-art { display:block; } .gp-ft-art .gp-screen { width:100%; } .gp-ft-nav { display:flex; flex-wrap:wrap; gap:10px; padding:28px 0 8px; } .gp-ft-nav a { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:700; font-size:14px; } .gp-ft-nav a:hover { border-color:#f61a7455; color:var(--pink-text); } .gp-ft-nav .icon { width:17px; height:17px; color:var(--pink-text); } .gp-module { scroll-margin-top:96px; } .gp-module.is-alt { background:var(--paper); } .gp-module-title { display:flex; align-items:center; gap:18px; } .gp-module-title .eyebrow { margin-bottom:8px; } .gp-module-body.has-screen { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:40px; align-items:start; } .gp-module-body.has-screen .svc-items { grid-template-columns:1fr; } @media (max-width:1000px) { .gp-module-body.has-screen { grid-template-columns:1fr; } } /* ---------- contact ---------- */ .gp-ct-art .gp-screen { width:min(620px, 100%); } .gp-ct-list { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px; } .gp-ct-list li { display:flex; gap:12px; align-items:flex-start; color:#e7e9f5; font-size:15px; line-height:1.5; } .gp-ct-list .icon { flex:none; width:22px; height:22px; color:#ff8fc0; } /* ---------- 404 ---------- */ .gp-404 { padding:120px 0; } .gp-404 .hero-actions { margin-top:28px; } /* ---------- mode sombre ---------- */ html[data-theme="dark"] .gp-screen { border-color:#262b4d; background:#141833; } html[data-theme="dark"] .gp-screen-bar { background:#1a1f3d; border-color:#262b4d; } html[data-theme="dark"] .gp-extra, html[data-theme="dark"] .gp-ft-nav a, html[data-theme="dark"] .hdr-login { background:#141833; border-color:#262b4d; color:#eef0fb; } html[data-theme="dark"] .gp-module.is-alt { background:#0f1330; } html[data-theme="dark"] .gp-phone { border-color:#1f2550; } /* points compacts à côté d'une capture */ .gp-module-body.has-screen .svc-items { gap:12px; } .gp-module-body.has-screen .svc-item { display:grid; grid-template-columns:44px minmax(0, 1fr); align-items:center; column-gap:14px; padding:16px 20px; min-height:0; } .gp-module-body.has-screen .svc-item-num { font-size:22px; line-height:1; margin:0; } .gp-module-body.has-screen .svc-item-ic { display:none; } .gp-module-body.has-screen .svc-item h3 { font-size:15.5px; line-height:1.45; margin:0; } .gp-module-screen { position:sticky; top:110px; } /* pastilles d'icône hors des cartes de service (mêmes teintes que la référence) */ .gp-module-title .iconbox, .gp-extra .iconbox { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; flex:none; background:#fff0f6; color:var(--pink-text); } .gp-module-title .iconbox.tint-orange, .gp-extra .iconbox.tint-orange { background:#fff1e8; color:#b54214; } .gp-module-title .iconbox.tint-violet, .gp-extra .iconbox.tint-violet { background:#eaf3ff; color:#1f63e0; } .gp-module-title .iconbox svg, .gp-extra .iconbox svg { width:26px; height:26px; } html[data-theme="dark"] .gp-module-title .iconbox, html[data-theme="dark"] .gp-extra .iconbox { background:rgba(246,26,116,.16); color:#ff8fc0; } html[data-theme="dark"] .gp-module-title .iconbox.tint-orange, html[data-theme="dark"] .gp-extra .iconbox.tint-orange { background:rgba(255,99,47,.16); color:#ffad85; } html[data-theme="dark"] .gp-module-title .iconbox.tint-violet, html[data-theme="dark"] .gp-extra .iconbox.tint-violet { background:rgba(43,117,243,.2); color:#7cc4ff; } /* ========================================================================== Hero GestaPro : bandeau marine, titre en dégradé, capture inclinée + cartes flottantes, onglets à barre de progression (moteur du carrousel : site.js, data-hero / role=tab). ========================================================================== */ .gp-hero { position:relative; margin:14px 16px 0; border-radius:34px; overflow:hidden; color:#fff; isolation:isolate; background:radial-gradient(120% 90% at 85% 10%, #2a1460 0%, transparent 55%), linear-gradient(160deg, #0b1044 0%, #0e1555 55%, #120b3d 100%); } .gp-hero-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(90% 80% at 70% 30%, #000 30%, transparent 80%); mask-image:radial-gradient(90% 80% at 70% 30%, #000 30%, transparent 80%); } .gp-glow { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; } .gp-glow.g1 { width:460px; height:460px; right:-80px; top:-120px; background:#f61a74; } .gp-glow.g2 { width:420px; height:420px; left:28%; bottom:-240px; background:#2b75f3; opacity:.45; } .gp-glow.g3 { width:300px; height:300px; left:-90px; top:-120px; background:#6317dd; opacity:.4; } .gp-hero-inner { padding:72px 0 34px; } .gp-slide { display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); gap:56px; align-items:center; min-height:460px; } .gp-slide[hidden] { display:none; } .gp-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#ffd1e6; font-size:12.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; margin:0 0 22px; } .gp-chip .icon { width:17px; height:17px; color:#04cafd; } .gp-hero-title { color:#fff; font-size:clamp(38px, 4.4vw, 62px); line-height:1.06; letter-spacing:-2.6px; font-weight:800; margin:0; } .gp-hero-title span { display:block; background:linear-gradient(100deg, #f61a74 0%, #fe763c 55%, #fec425 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .gp-hero-desc { color:rgba(232,235,255,.78); font-size:18px; line-height:1.65; max-width:520px; margin:22px 0 0; } .gp-hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; } .gp-btn-ghost { display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:8px; border:1px solid rgba(255,255,255,.28); color:#fff; font-weight:700; font-size:15px; background:rgba(255,255,255,.04); transition:background .2s, border-color .2s; } .gp-btn-ghost:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); color:#fff; } .gp-btn-ghost .icon { width:19px; height:19px; } /* visuel : capture inclinée en perspective */ .gp-hero-art { position:relative; perspective:1600px; min-height:400px; display:flex; align-items:center; justify-content:center; } .gp-tilt { width:100%; transform:rotateY(-11deg) rotateX(4deg) rotate(1deg); transform-origin:left center; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .gp-hero-art:hover .gp-tilt { transform:rotateY(-6deg) rotateX(2deg); } .gp-tilt .gp-screen { border-color:rgba(255,255,255,.18); box-shadow:0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06), 0 20px 60px -20px rgba(246,26,116,.55); } .gp-tilt .gp-screen img { aspect-ratio:1600/1000; object-fit:cover; object-position:top left; } .gp-float { position:absolute; display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:16px; background:rgba(255,255,255,.96); color:var(--ink); box-shadow:0 24px 50px -20px rgba(0,0,0,.55); animation:gp-float 6s ease-in-out infinite; } .gp-float small { display:block; font-size:11.5px; color:#687085; font-weight:600; } .gp-float b { display:block; font-size:15px; font-weight:800; white-space:nowrap; } .gp-float-ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; flex:none; } .gp-float-ic .icon { width:20px; height:20px; } .gp-float-ic.is-green { background:var(--gp-cool); } .gp-float-ic.is-pink { background:linear-gradient(135deg, #f61a74, #f61a74); } .gp-float-a { left:-28px; bottom:34px; } .gp-float-b { right:-14px; top:18px; animation-delay:-3s; flex-wrap:wrap; max-width:250px; } .gp-float-bar { display:block; flex-basis:100%; height:6px; border-radius:99px; background:#f1f2f7; overflow:hidden; } .gp-float-bar i { display:block; width:34%; height:100%; border-radius:99px; background:linear-gradient(90deg, #f61a74, #fe763c); } @keyframes gp-float { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-10px); } } /* diapositive 2 : chaîne des documents */ .gp-flow { position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:10px 12px; border-radius:18px; background:rgba(11,16,68,.82); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 24px 50px -20px rgba(0,0,0,.6); } .gp-flow-step { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.08); font-size:13px; white-space:nowrap; } .gp-flow-step .icon { width:17px; height:17px; color:#5fd4ff; } .gp-flow-step.is-last { background:linear-gradient(100deg, #f61a74, #fe5c4a); } .gp-flow-step.is-last .icon { color:#fff; } .gp-flow-sep .icon { width:15px; height:15px; color:rgba(255,255,255,.5); } /* diapositive 3 : ticket fiscal + extrait TEIF */ .gp-slide-fiscal .gp-hero-art { gap:0; } .gp-ticket { position:relative; z-index:2; width:min(360px, 92%); padding:22px 22px 18px; border-radius:22px; background:#fff; color:var(--ink); box-shadow:0 40px 80px -30px rgba(0,0,0,.6); transform:rotate(-3deg) translateX(-120px) translateY(30px); } .gp-ticket-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px dashed #e3e5ee; margin-bottom:12px; } .gp-ticket-head span { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-family:ui-monospace, Menlo, monospace; font-size:14px; } .gp-ticket-head .icon { width:19px; height:19px; color:var(--pink-text); } .gp-ticket-head em { font-style:normal; font-size:12px; font-weight:800; color:#0b8a56; background:#e8faf1; padding:4px 10px; border-radius:99px; } .gp-ticket dl { margin:0; display:grid; gap:9px; } .gp-ticket dl div { display:flex; justify-content:space-between; font-size:14.5px; } .gp-ticket dt { color:#687085; } .gp-ticket dd { margin:0; font-weight:700; font-variant-numeric:tabular-nums; } .gp-ticket-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding:14px 16px; border-radius:14px; background:linear-gradient(100deg, #f61a74, #fe5c4a); color:#fff; } .gp-ticket-total span { font-weight:700; } .gp-ticket-total b { font-size:24px; font-weight:800; letter-spacing:-.5px; } .gp-ticket-total small { font-size:13px; opacity:.85; } .gp-xml { position:absolute; right:-10px; top:6px; z-index:1; width:min(330px, 70%); border-radius:18px; overflow:hidden; background:#070b2e; border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 60px -24px rgba(0,0,0,.7); transform:rotate(4deg); animation:gp-float 7s ease-in-out infinite; } .gp-xml-head { display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:12px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.08); } .gp-xml-head .icon { width:15px; height:15px; color:#4ade9a; } .gp-xml code { display:block; padding:14px 16px 18px; font:12.5px/1.75 ui-monospace, Menlo, monospace; color:#a5b4fc; } .gp-xml code i { display:block; font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gp-xml code .in { padding-left:14px; color:#c4b5fd; } .gp-xml code .in2 { padding-left:28px; color:#f9a8d4; } .gp-xml code .hl { color:#fde68a; font-weight:700; } /* onglets à barre de progression */ .gp-hero-nav { display:flex; align-items:stretch; gap:16px; margin-top:44px; } .gp-hero-tabs { flex:1; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; } .gp-hero-tab { position:relative; display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:16px; text-align:left; color:#fff; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); transition:background .2s, border-color .2s; } .gp-hero-tab:hover { background:rgba(255,255,255,.09); } .gp-hero-tab.active { background:rgba(255,255,255,.12); border-color:rgba(255,143,192,.45); } .gp-tab-num { font-size:22px; font-weight:800; color:rgba(255,255,255,.35); font-variant-numeric:tabular-nums; } .gp-hero-tab.active .gp-tab-num { color:#ff8fc0; } .gp-tab-txt b { display:block; font-size:15.5px; } .gp-tab-txt small { display:block; font-size:12.5px; color:rgba(232,235,255,.62); } .gp-tab-progress { position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--gp-spectrum); } .gp-hero.is-playing:not(.is-paused) .gp-hero-tab.active .gp-tab-progress { animation:gp-progress var(--slide-interval, 7000ms) linear forwards; } .gp-hero:not(.is-playing) .gp-hero-tab.active .gp-tab-progress { width:100%; } @keyframes gp-progress { from { width:0; } to { width:100%; } } .gp-hero-ctrl { display:flex; align-items:center; gap:8px; } .gp-hero-ctrl button { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); cursor:pointer; } .gp-hero-ctrl button:hover { background:rgba(255,255,255,.16); } .gp-hero-ctrl .icon { width:20px; height:20px; } .gp-hero-ctrl .arrow-back { transform:rotate(180deg); } .gp-hero-ctrl .i-pause { display:none; } .gp-hero.is-playing .gp-hero-ctrl .i-pause { display:block; } .gp-hero.is-playing .gp-hero-ctrl .i-play { display:none; } .gp-hero-proof { list-style:none; margin:30px 0 0; padding:22px 0 0; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:12px 34px; color:rgba(232,235,255,.7); font-size:14px; } .gp-hero-proof b { font-size:17px; margin-right:6px; background:linear-gradient(100deg, #7cc4ff, #04cafd); -webkit-background-clip:text; background-clip:text; color:transparent; } /* entrée des diapositives */ .gp-hero.has-slid .gp-slide.is-active .gp-hero-copy > * { animation:gp-up .7s cubic-bezier(.2,.7,.2,1) both; } .gp-hero.has-slid .gp-slide.is-active .gp-hero-copy > :nth-child(2) { animation-delay:.08s; } .gp-hero.has-slid .gp-slide.is-active .gp-hero-copy > :nth-child(3) { animation-delay:.16s; } .gp-hero.has-slid .gp-slide.is-active .gp-hero-copy > :nth-child(4) { animation-delay:.24s; } .gp-hero.has-slid .gp-slide.is-active .gp-hero-art { animation:gp-in .9s cubic-bezier(.2,.7,.2,1) both; } @keyframes gp-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } @keyframes gp-in { from { opacity:0; transform:translateX(30px) scale(.97); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { .gp-float, .gp-xml, .gp-hero .gp-slide * { animation:none !important; } .gp-tilt { transition:none; } } @media (max-width:1100px) { .gp-slide { grid-template-columns:1fr; gap:40px; min-height:0; } .gp-hero-art { min-height:0; padding:10px 20px 30px; } .gp-float-a { left:0; } .gp-float-b { right:0; } } @media (max-width:760px) { .gp-hero { margin:8px 8px 0; border-radius:24px; } .gp-hero-inner { padding:44px 0 26px; } .gp-hero-desc { font-size:16px; } .gp-tilt, .gp-hero-art:hover .gp-tilt { transform:none; } .gp-float { padding:9px 12px; } .gp-float b { font-size:13px; } .gp-float-ic { width:32px; height:32px; } .gp-float-a { bottom:-8px; } .gp-float-b { display:none; } .gp-flow { position:static; transform:none; margin-top:14px; flex-wrap:wrap; justify-content:center; } .gp-flow-sep { display:none; } .gp-ticket { transform:none; width:100%; } .gp-xml { position:relative; top:auto; right:auto; width:100%; transform:none; margin-top:-10px; } .gp-slide-fiscal .gp-hero-art { flex-direction:column; } .gp-hero-nav { flex-direction:column; } .gp-hero-tabs { grid-template-columns:1fr 1fr; gap:8px; } .gp-hero-tab { flex-direction:column; align-items:flex-start; gap:4px; padding:12px; } .gp-tab-txt small { display:none; } .gp-tab-num { font-size:16px; } .gp-hero-ctrl { justify-content:flex-end; } .gp-hero-proof { gap:10px 20px; font-size:13px; } } /* ========================================================================== Page Fonctionnalités : blocs illustrés, grille des modules, détail repliable ========================================================================== */ .ft-hero .gp-hero-title span { display:inline; } .ft-hero-grid { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:50px; align-items:center; padding:64px 0 30px; } .ft-collage { position:relative; min-height:380px; } .ft-c-main { position:relative; z-index:2; width:84%; transform:rotate(-2deg); } .ft-c-side { position:absolute; z-index:1; right:0; top:-14px; width:52%; transform:rotate(5deg); opacity:.9; } .ft-c-phone { position:absolute; z-index:3; right:4%; bottom:-30px; width:150px; border-width:6px; } .ft-c-main .gp-screen, .ft-c-side .gp-screen { border-color:rgba(255,255,255,.18); box-shadow:0 34px 70px -28px rgba(0,0,0,.65); } .ft-themes-nav { display:flex; flex-wrap:wrap; gap:10px; padding:16px 0 34px; } .ft-themes-nav a { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px; color:#fff; font-size:14px; font-weight:700; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); } .ft-themes-nav a:hover { background:rgba(255,255,255,.15); color:#fff; } .ft-themes-nav .icon { width:17px; height:17px; color:#5fd4ff; } .ft-theme { padding:96px 0; scroll-margin-top:80px; position:relative; } .ft-theme:nth-of-type(even) { background:var(--paper); } .ft-anchor { position:absolute; top:0; } .ft-theme-grid { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:64px; align-items:center; } .ft-theme.is-reverse .ft-theme-copy { order:2; } .ft-theme.is-reverse .ft-theme-grid { grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); } .ft-theme-copy h2 { font-size:clamp(28px, 3vw, 42px); letter-spacing:-1.4px; margin:0 0 14px; } .ft-theme-copy > p:not(.eyebrow):not(.ft-mods) { font-size:18px; margin:0 0 26px; } .ft-chips { list-style:none; margin:0; padding:0; display:grid; gap:12px; } .ft-chips li { display:flex; align-items:center; gap:14px; font-weight:700; font-size:16px; color:var(--ink); } .ft-chip-ic { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:none; color:#fff; background:var(--gp-warm); box-shadow:0 10px 22px -12px rgba(246,26,116,.7); } .ft-chips li:nth-child(2) .ft-chip-ic { background:var(--gp-cool); box-shadow:0 10px 22px -12px rgba(43,117,243,.7); } .ft-chips li:nth-child(3) .ft-chip-ic { background:linear-gradient(135deg, #6317dd, #f61a74); box-shadow:0 10px 22px -12px rgba(99,23,221,.7); } .ft-chip-ic .icon { width:21px; height:21px; } .ft-mods { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; } .ft-mods a { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#535973; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:#fff; } .ft-mods a:hover { color:var(--pink-text); border-color:#f61a7455; } .ft-mods .icon { width:15px; height:15px; } .ft-theme-visual { position:relative; padding:44px 40px; border-radius:30px; isolation:isolate; overflow:visible; } .ft-theme-visual::before { content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; opacity:.16; } .ft-theme-visual.tone-warm::before { background:var(--gp-warm); } .ft-theme-visual.tone-cool::before { background:var(--gp-cool); } .ft-theme-visual::after { content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; background-image:radial-gradient(rgba(11,16,68,.12) 1.2px, transparent 1.4px); background-size:18px 18px; -webkit-mask-image:linear-gradient(135deg, #000, transparent 70%); mask-image:linear-gradient(135deg, #000, transparent 70%); } .ft-theme-visual .gp-screen img { aspect-ratio:1600/1000; object-fit:cover; object-position:top left; } .ft-flow { position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); color:#fff; } .ft-float-r { right:-18px; top:22px; } .ft-float-l { left:-18px; bottom:28px; animation-delay:-3s; } .gp-float-bar i.w66 { width:66%; background:var(--gp-cool); } .ft-ticket-scene { position:relative; } .ft-ticket-scene .gp-screen { width:78%; } .ft-ticket { position:absolute; right:-10px; top:50%; transform:translateY(-50%) rotate(3deg); width:300px; padding:18px; } .ft-ticket dl div { font-size:13.5px; } .ft-ticket .gp-ticket-total b { font-size:20px; } .ft-badge { position:absolute; left:-14px; bottom:-18px; display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:16px; color:#fff; box-shadow:0 24px 50px -20px rgba(43,117,243,.7); animation:gp-float 6s ease-in-out infinite; } .ft-badge-cool { background:var(--gp-cool); } .ft-badge .icon { width:24px; height:24px; } .ft-badge b { display:block; font-size:16px; } .ft-badge small { display:block; font-size:12px; opacity:.85; } .ft-modules { padding:96px 0; } .ft-mod-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; } .ft-mod { scroll-margin-top:90px; padding:22px; border-radius:20px; border:1px solid var(--line); background:#fff; transition:transform .2s, box-shadow .2s; } .ft-mod:hover { transform:translateY(-3px); box-shadow:0 22px 40px -28px rgba(11,16,68,.45); } .ft-mod:target { border-color:#f61a74; box-shadow:0 0 0 4px rgba(246,26,116,.14); } .ft-mod-ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#fff; margin-bottom:14px; } .ft-mod-ic.tint-pink { background:var(--gp-warm); } .ft-mod-ic.tint-violet { background:var(--gp-cool); } .ft-mod-ic.tint-orange { background:linear-gradient(135deg, #6317dd, #f61a74); } .ft-mod-ic .icon { width:24px; height:24px; } .ft-mod h3 { font-size:17px; margin:0 0 4px; } .ft-mod p { font-size:14px; margin:0; } .ft-all { margin-top:28px; border:1px solid var(--line); border-radius:20px; background:#fff; } .ft-all summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:18px 22px; font-weight:800; color:var(--ink); } .ft-all summary::-webkit-details-marker { display:none; } .ft-all summary .icon { width:20px; height:20px; color:var(--pink-text); } .ft-all-chev { margin-left:auto; transition:transform .2s; } .ft-all[open] .ft-all-chev { transform:rotate(180deg); } .ft-all-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:26px 34px; padding:6px 24px 10px; } .ft-all-grid h3 { display:flex; align-items:center; gap:8px; font-size:15.5px; margin:0 0 8px; } .ft-all-grid h3 .icon { width:18px; height:18px; color:var(--pink-text); } .ft-all-grid ul { margin:0; padding-left:18px; } .ft-all-grid li { font-size:13.5px; color:var(--text); line-height:1.55; margin:3px 0; } .ft-all-note { display:flex; gap:10px; align-items:flex-start; margin:10px 24px 22px; padding:12px 14px; border-radius:12px; background:#eaf3ff; color:#1f4fb0; font-size:13.5px; } .ft-all-note .icon { width:18px; height:18px; flex:none; } html[data-theme="dark"] .ft-mod, html[data-theme="dark"] .ft-all, html[data-theme="dark"] .ft-mods a { background:#141833; border-color:#262b4d; color:#eef0fb; } html[data-theme="dark"] .ft-chips li { color:#eef0fb; } html[data-theme="dark"] .ft-theme:nth-of-type(even) { background:#0f1330; } html[data-theme="dark"] .ft-all-note { background:rgba(43,117,243,.16); color:#a9d1ff; } html[data-theme="dark"] .ft-theme-visual::after { background-image:radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.4px); } @media (max-width:1100px) { .ft-hero-grid, .ft-theme-grid { grid-template-columns:1fr; gap:36px; } .ft-theme.is-reverse .ft-theme-copy { order:0; } .ft-theme.is-reverse .ft-theme-grid { grid-template-columns:1fr; } .ft-mod-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } .ft-all-grid { grid-template-columns:1fr 1fr; } } @media (max-width:700px) { .ft-hero-grid { padding:40px 0 20px; } .ft-collage { min-height:0; } .ft-c-main { width:100%; transform:none; } .ft-c-side { display:none; } .ft-c-phone { width:96px; bottom:-20px; right:-4px; } .ft-theme { padding:64px 0; } .ft-theme-visual { padding:22px 16px 34px; } .ft-float-r, .ft-float-l { display:none; } .ft-flow { position:static; transform:none; margin-top:14px; flex-wrap:wrap; justify-content:center; } .ft-ticket-scene .gp-screen { width:100%; } .ft-ticket { position:relative; right:auto; top:auto; transform:none; width:100%; margin-top:-30px; } .ft-badge { position:relative; left:auto; bottom:auto; margin-top:12px; width:fit-content; } .ft-mod-grid { grid-template-columns:1fr 1fr; gap:10px; } .ft-mod { padding:16px; } .ft-all-grid { grid-template-columns:1fr; } } /* ---------- Démo en ligne : comptes publics ---------- */ .gp-demo { padding:96px 0; background:var(--paper); } .gp-demo-page { background:transparent; } .gp-demo-grid { display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:48px; align-items:center; } .gp-demo-copy h2 { margin:0 0 14px; } .gp-demo-copy > p:not(.eyebrow) { font-size:17px; margin-bottom:22px; } .gp-demo-copy .hm-values { margin-bottom:26px; } .gp-demo-accounts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; } .gp-demo-acc { display:flex; gap:14px; padding:20px; border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:0 18px 40px -34px rgba(11,16,68,.4); } .gp-demo-acc .iconbox { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:none; background:#fff0f6; color:var(--pink-text); } .gp-demo-acc .iconbox.tint-violet { background:#eaf3ff; color:#1f63e0; } .gp-demo-acc .iconbox.tint-orange { background:#fff1e8; color:#b54214; } .gp-demo-acc h3 { font-size:17px; margin:0 0 2px; } .gp-demo-acc > div > p { font-size:13.5px; margin:0 0 10px; } .gp-demo-acc dl { margin:0; display:grid; gap:4px; } .gp-demo-acc dl div { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; } .gp-demo-acc dt { font-size:12px; color:#687085; min-width:88px; } .gp-demo-acc dd { margin:0; } .gp-demo-acc code { font-size:12.5px; padding:2px 7px; border-radius:6px; background:#f4f5fa; color:var(--ink); word-break:break-all; } html[data-theme="dark"] .gp-demo { background:#0f1330; } html[data-theme="dark"] .gp-demo-page { background:transparent; } html[data-theme="dark"] .gp-demo-acc { background:#141833; border-color:#262b4d; } html[data-theme="dark"] .gp-demo-acc code { background:#1f2550; color:#eef0fb; } @media (max-width:1000px) { .gp-demo-grid { grid-template-columns:1fr; } } @media (max-width:640px) { .gp-demo-accounts { grid-template-columns:1fr; } .gp-demo { padding:64px 0; } } /* ---------- Au-delà du standard : API, IA, sur mesure ---------- */ .gp-beyond { padding:96px 0; } .gp-beyond-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; } .gp-beyond-card { position:relative; padding:30px 26px 26px; border-radius:24px; background:#fff; border:1px solid var(--line); overflow:hidden; box-shadow:0 24px 50px -40px rgba(11,16,68,.45); } .gp-beyond-card::before { content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--gp-warm); } .gp-beyond-card.tone-cool::before { background:var(--gp-cool); } .gp-beyond-card.tone-mix::before { background:var(--gp-spectrum); } .gp-beyond-ic { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:#fff; margin-bottom:18px; background:var(--gp-warm); box-shadow:0 14px 26px -14px rgba(246,26,116,.7); } .tone-cool .gp-beyond-ic { background:var(--gp-cool); box-shadow:0 14px 26px -14px rgba(43,117,243,.7); } .tone-mix .gp-beyond-ic { background:linear-gradient(135deg, #6317dd, #f61a74); box-shadow:0 14px 26px -14px rgba(99,23,221,.7); } .gp-beyond-ic .icon { width:27px; height:27px; } .gp-beyond-card h3 { font-size:21px; margin:0 0 10px; } .gp-beyond-card > p { font-size:15px; margin:0 0 18px; } .gp-beyond-card ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; } .gp-beyond-card li { display:flex; gap:9px; align-items:flex-start; font-size:14.5px; font-weight:600; color:var(--ink); } .gp-beyond-card li .icon { width:18px; height:18px; flex:none; margin-top:2px; color:var(--pink-text); } .tone-cool li .icon { color:#1f63e0; } .gp-beyond-cta { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:24px; padding:22px 26px; border-radius:20px; background:linear-gradient(100deg, rgba(246,26,116,.08), rgba(43,117,243,.08)); border:1px solid rgba(246,26,116,.18); } .gp-beyond-cta p { margin:0; max-width:720px; } html[data-theme="dark"] .gp-beyond-card { background:#141833; border-color:#262b4d; } html[data-theme="dark"] .gp-beyond-card li { color:#eef0fb; } @media (max-width:1000px) { .gp-beyond-grid { grid-template-columns:1fr; } .gp-beyond { padding:64px 0; } } /* ========================================================================== Intelligence artificielle : bandeau marine, conversation d'exemple, garde-fous, usages, captures ========================================================================== */ .ft-themes-nav a.is-ia { background:linear-gradient(100deg, rgba(246,26,116,.38), rgba(99,23,221,.38)); border-color:rgba(255,143,192,.5); } .ft-themes-nav a.is-ia .icon { color:#fec425; } /* conversation avec l'assistant (maquette) */ .gp-chat { margin:0; width:100%; max-width:540px; border-radius:22px; overflow:hidden; background:#fff; color:var(--ink); text-align:start; border:1px solid rgba(255,255,255,.2); box-shadow:0 40px 80px -30px rgba(0,0,0,.6), 0 20px 60px -24px rgba(246,26,116,.45); } .gp-chat-head { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid #eceef5; } .gp-chat-av { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none; color:#fff; background:var(--gp-cool); } .gp-chat-av .icon { width:20px; height:20px; } .gp-chat-who { min-width:0; } .gp-chat-who b { display:block; font-size:15px; } .gp-chat-who small { display:block; font-size:12px; color:#687085; } .gp-chat-head em { margin-inline-start:auto; font-style:normal; font-size:11.5px; font-weight:800; color:#0b8a56; background:#e8faf1; padding:4px 10px; border-radius:99px; white-space:nowrap; } .gp-chat-body { display:grid; gap:12px; padding:18px; background:#f7f8fc; } .gp-msg { margin:0; max-width:92%; font-size:14px; line-height:1.5; } .gp-msg.is-user { justify-self:end; padding:10px 14px; border-radius:16px 16px 4px 16px; background:linear-gradient(100deg, #f61a74, #fe5c4a); color:#fff; font-weight:600; } .gp-msg.is-ai { justify-self:start; width:100%; max-width:100%; padding:12px 14px; border-radius:16px 16px 16px 4px; background:#fff; border:1px solid #e6e8f0; } .gp-msg.is-ai > p { margin:0 0 10px; color:var(--ink); } .gp-chat-scroll { overflow-x:auto; } .gp-chat-table { width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; } .gp-chat-table th { padding:6px 8px; font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#8a91a3; border-bottom:1px solid #eceef5; } .gp-chat-table td { padding:7px 8px; font-size:12.5px; border-bottom:1px solid #f1f2f7; white-space:nowrap; color:var(--ink); } .gp-chat-table tr:last-child td { border-bottom:0; } .gp-chat-table .num { text-align:end; } .gp-chat-table .is-late { color:#c8105c; font-weight:700; } .gp-chat-src { display:flex; align-items:center; gap:6px; margin:8px 0 0 !important; font-size:11.5px; color:#687085 !important; } .gp-chat-src .icon { width:14px; height:14px; color:#2b75f3; } .gp-chat-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; } .gp-chat-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:9px; background:var(--gp-cool); color:#fff; font-size:12.5px; font-weight:700; } .gp-chat-note { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#535973; } .gp-chat-btn .icon, .gp-chat-note .icon { width:15px; height:15px; } .gp-chat-note .icon { color:#0b8a56; } .gp-msg.is-file { display:inline-flex; align-items:center; gap:8px; } .gp-msg.is-file .icon { width:17px; height:17px; } .gp-msg.is-done { display:flex; gap:10px; align-items:flex-start; } .gp-msg.is-done p { margin:0; color:#535973; font-size:13.5px; } .gp-msg.is-done p b { display:block; color:var(--ink); font-size:14px; } .gp-chat-ok { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; background:#e8faf1; color:#0b8a56; } .gp-chat-ok .icon { width:15px; height:15px; } .gp-chat-input { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px 12px 18px; border-top:1px solid #eceef5; background:#fff; color:#8a91a3; font-size:13.5px; } .gp-chat-input i { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; color:#fff; background:linear-gradient(100deg, #f61a74, #fe5c4a); } .gp-chat-input .icon { width:17px; height:17px; } /* diapositive IA du hero */ .gp-ai-hero { width:min(500px, 100%); transform:rotate(-1.5deg); } .gp-float-ia { right:-6px; bottom:-14px; animation-delay:-2s; } /* bandeau */ .gp-ai { padding:40px 0 96px; scroll-margin-top:80px; } .gp-ai-band { position:relative; margin:0 16px; border-radius:34px; overflow:hidden; color:#fff; isolation:isolate; background:radial-gradient(120% 90% at 15% 10%, #2a1460 0%, transparent 55%), linear-gradient(160deg, #0b1044 0%, #0e1555 55%, #120b3d 100%); } .gp-ai-band .gp-glow.g1 { left:-80px; right:auto; } .gp-ai-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:56px; align-items:center; padding:80px 0; } .gp-ai-title { color:#fff; font-size:clamp(34px, 3.8vw, 54px); line-height:1.08; letter-spacing:-2px; font-weight:800; margin:0; } .gp-ai-title span { display:block; background:linear-gradient(100deg, #f61a74 0%, #fe763c 55%, #fec425 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .gp-ai-guards { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; } .gp-ai-guards li { display:flex; gap:12px; align-items:flex-start; } .gp-ai-guards li > span { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none; color:#5fd4ff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); } .gp-ai-guards .icon { width:19px; height:19px; } .gp-ai-guards b { display:block; font-size:14.5px; color:#fff; } .gp-ai-guards small { display:block; font-size:13px; line-height:1.5; color:rgba(232,235,255,.72); } .gp-ai-art { display:flex; justify-content:center; } /* usages */ #ia-usages { padding-top:84px; scroll-margin-top:80px; } .gp-ai-lead { max-width:420px; margin:0 !important; font-size:15px; } .gp-ai-cards { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:20px; } .gp-ai-card { grid-column:span 2; position:relative; padding:30px 26px 26px; border-radius:24px; background:#fff; border:1px solid var(--line); overflow:hidden; box-shadow:0 24px 50px -40px rgba(11,16,68,.45); } .gp-ai-card:nth-child(n+4) { grid-column:span 3; } .gp-ai-card::before { content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--gp-warm); } .gp-ai-card.tone-cool::before { background:var(--gp-cool); } .gp-ai-card.tone-mix::before { background:var(--gp-spectrum); } .gp-ai-card h3 { font-size:21px; margin:0 0 6px; } .gp-ai-card > p { font-size:15px; margin:0 0 16px; } .gp-ai-card ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; } .gp-ai-card li { display:flex; gap:9px; align-items:flex-start; font-size:14.5px; font-weight:600; color:var(--ink); } .gp-ai-card li .icon { width:18px; height:18px; flex:none; margin-top:2px; color:var(--pink-text); } .gp-ai-card.tone-cool li .icon { color:#1f63e0; } .gp-ai-shots { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; margin-top:44px; } .gp-ai-shots > figure { margin:0; } .gp-ai-shots .gp-screen img { aspect-ratio:1600/1000; object-fit:cover; object-position:top left; } .gp-ai-shots figcaption { margin-top:14px; font-size:14px; color:var(--text); } .gp-ai-shots figcaption b { display:block; font-size:16px; color:var(--ink); margin-bottom:2px; } /* ========================================================================== Planning, codes-barres et modules complémentaires ========================================================================== */ .gp-ops { padding:30px 0 30px; } .gp-ops .gp-tour-row:first-of-type { margin-top:20px; } .gp-ops .gp-ops-visual { padding:40px 34px; } .gp-tour-row.is-reverse .gp-ops-visual { order:2; } .gp-tour-row .gp-ops-visual .gp-screen { order:0; } /* planning (maquette) */ .gp-agenda { margin:0; border-radius:20px; overflow:hidden; background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:0 30px 60px -28px rgba(11,16,68,.38), 0 10px 22px -16px rgba(246,26,116,.35); } .gp-ag-top { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; padding:14px 16px; border-bottom:1px solid #eceef5; } .gp-ag-top b { display:inline-flex; align-items:center; gap:8px; font-size:15px; } .gp-ag-top b .icon { width:18px; height:18px; color:var(--pink-text); } .gp-ag-views { display:inline-flex; padding:3px; border-radius:10px; background:#f1f2f7; } .gp-ag-views i { font-style:normal; font-size:12px; font-weight:700; padding:5px 10px; border-radius:8px; color:#687085; } .gp-ag-views i.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(11,16,68,.12); } .gp-ag-sync { margin-inline-start:auto; display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px; font-size:12px; font-weight:800; color:#1f63e0; background:#eaf3ff; white-space:nowrap; } .gp-ag-sync .icon { width:14px; height:14px; } .gp-ag-grid { display:grid; grid-template-columns:50px repeat(5, minmax(0, 1fr)); grid-template-rows:34px repeat(8, 46px); column-gap:4px; padding:0 10px 10px 0; background-image:linear-gradient(#eef0f6 1px, transparent 1px); background-size:100% 46px; background-position:0 34px; } .gp-ag-corner { grid-column:1; grid-row:1; } .gp-ag-day { grid-row:1; align-self:center; text-align:center; font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#687085; } .gp-ag-hour { grid-column:1; font-size:11px; color:#8a91a3; text-align:end; padding:2px 8px 0 0; font-variant-numeric:tabular-nums; } .gp-ag-hour.r1 { grid-row:2; } .gp-ag-hour.r2 { grid-row:3; } .gp-ag-hour.r3 { grid-row:4; } .gp-ag-hour.r4 { grid-row:5; } .gp-ag-hour.r5 { grid-row:6; } .gp-ag-hour.r6 { grid-row:7; } .gp-ag-hour.r7 { grid-row:8; } .gp-ag-hour.r8 { grid-row:9; } .gp-ag-day.d1, .gp-ag-ev.d1 { grid-column:2; } .gp-ag-day.d2, .gp-ag-ev.d2 { grid-column:3; } .gp-ag-day.d3, .gp-ag-ev.d3 { grid-column:4; } .gp-ag-day.d4, .gp-ag-ev.d4 { grid-column:5; } .gp-ag-day.d5, .gp-ag-ev.d5 { grid-column:6; } .gp-ag-ev.r1 { grid-row-start:2; } .gp-ag-ev.r2 { grid-row-start:3; } .gp-ag-ev.r3 { grid-row-start:4; } .gp-ag-ev.r4 { grid-row-start:5; } .gp-ag-ev.r5 { grid-row-start:6; } .gp-ag-ev.r6 { grid-row-start:7; } .gp-ag-ev.r7 { grid-row-start:8; } .gp-ag-ev.r8 { grid-row-start:9; } .gp-ag-ev.s1 { grid-row-end:span 1; } .gp-ag-ev.s2 { grid-row-end:span 2; } .gp-ag-ev.s8 { grid-row-end:span 8; } .gp-ag-ev { position:relative; z-index:1; min-width:0; margin:3px 0; padding:6px 8px; border-radius:10px; border-inline-start:3px solid; overflow:hidden; font-size:12px; line-height:1.3; } .gp-ag-ev b, .gp-ag-ev small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gp-ag-ev small { font-size:11px; opacity:.85; } .gp-ag-ev.t-blue { background:#eaf3ff; border-color:#2b75f3; color:#1f4fb0; } .gp-ag-ev.t-green { background:#e8faf1; border-color:#12b76a; color:#0b6b44; } .gp-ag-ev.t-orange { background:#fff1e8; border-color:#fe5c4a; color:#b54214; } .gp-ag-ev.t-violet { background:#f1eafe; border-color:#6317dd; color:#4b12a8; } .gp-ag-ev.t-amber { background:#fff7df; border-color:#fec425; color:#7a5600; } .gp-ag-ev.t-leave { background:repeating-linear-gradient(135deg, #f4f5fa 0 6px, #eceef5 6px 12px); border-color:#a3a9bb; color:#535973; } .gp-ag-ev.is-conflict { z-index:2; margin-inline-start:34%; border-color:#c8105c; box-shadow:0 0 0 2px #fff, 0 8px 16px -8px rgba(200,16,92,.7); } .gp-ag-ev.is-conflict small { color:#c8105c; opacity:1; font-weight:700; } /* codes-barres : capture + étiquette réelle */ .gp-scan-scene { position:relative; } .gp-scan-scene .gp-screen { width:86%; } .gp-label { position:absolute; right:-8px; bottom:-28px; z-index:2; width:310px; display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; background:#fff; color:var(--ink); border:1px dashed #d9dce6; box-shadow:0 30px 60px -24px rgba(11,16,68,.55); transform:rotate(2deg); } .gp-label-txt { display:grid; gap:1px; min-width:0; flex:1; } .gp-label-txt small { font:11px/1.4 ui-monospace, Menlo, monospace; color:#8a91a3; } .gp-label-txt b { font-size:14px; } .gp-label-txt em { font-style:normal; font-weight:800; font-size:13px; color:var(--pink-text); } .gp-label-txt img { width:100%; max-width:170px; height:auto; margin-top:6px; } .gp-label-qr { width:86px; height:86px; flex:none; } .gp-float-scan { left:-16px; top:34px; } /* caisse, RH, cloud, TTN */ .gp-ops-more { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-top:80px; } .gp-ops-card { display:block; padding:22px; border-radius:20px; border:1px solid var(--line); background:#fff; transition:transform .2s, box-shadow .2s, border-color .2s; } .gp-ops-card:hover { transform:translateY(-3px); border-color:#f61a7455; box-shadow:0 22px 40px -28px rgba(11,16,68,.45); } .gp-ops-card b { display:block; font-size:17px; margin-bottom:4px; color:var(--ink); } .gp-ops-card small { display:block; font-size:14px; line-height:1.55; color:var(--text); } html[data-theme="dark"] .gp-ai-card, html[data-theme="dark"] .gp-ops-card { background:#141833; border-color:#262b4d; } html[data-theme="dark"] .gp-ai-card li, html[data-theme="dark"] .gp-ops-card b, html[data-theme="dark"] .gp-ai-shots figcaption b { color:#eef0fb; } html[data-theme="dark"] .gp-agenda { border-color:#262b4d; } @media (max-width:1100px) { .gp-ai-grid { grid-template-columns:1fr; gap:44px; padding:64px 0; } .gp-ai-cards { grid-template-columns:1fr 1fr; } .gp-ai-card, .gp-ai-card:nth-child(n+4) { grid-column:auto; } .gp-ai-card:last-child { grid-column:1 / -1; } .gp-ops-more { grid-template-columns:1fr 1fr; } } @media (max-width:900px) { .gp-tour-row.is-reverse .gp-ops-visual { order:0; } .gp-ai-shots { grid-template-columns:1fr; max-width:640px; } } @media (max-width:760px) { .gp-ai-band { margin:0 8px; border-radius:24px; } .gp-ai-grid { padding:48px 0; } .gp-ai-guards { grid-template-columns:1fr; } .gp-ai-hero { transform:none; } .gp-float-ia { display:none; } .gp-ai-cards { grid-template-columns:1fr; } .gp-ai-card:last-child { grid-column:auto; } .gp-ai-card { padding:26px 20px 22px; } .gp-ops .gp-ops-visual { padding:22px 14px 30px; } .gp-scan-scene .gp-screen { width:100%; } .gp-label { position:relative; right:auto; bottom:auto; width:min(310px, 100%); margin:-26px 0 0 auto; transform:none; } .gp-float-scan { display:none; } .gp-ops-more { grid-template-columns:1fr; margin-top:56px; } } @media (max-width:560px) { .gp-chat-body { padding:14px; } .gp-chat-head em { display:none; } .gp-chat-table th:nth-child(3), .gp-chat-table td:nth-child(3) { display:none; } .gp-ag-grid { grid-template-columns:44px repeat(3, minmax(0, 1fr)); } .gp-ag-day.d4, .gp-ag-day.d5, .gp-ag-ev.d4, .gp-ag-ev.d5 { display:none; } .gp-ag-sync { margin-inline-start:0; } } /* ========================================================================== Pages thématiques (views/landing.php) : fil d'Ariane, « En bref », sections en questions, tableaux, étapes ========================================================================== */ .lp-crumbs { padding-top:26px; } .lp-crumbs ol { display:flex; flex-wrap:wrap; gap:6px 10px; margin:0; padding:0; list-style:none; font-size:13.5px; color:rgba(232,235,255,.7); } .lp-crumbs li { display:inline-flex; align-items:center; gap:10px; } .lp-crumbs li + li::before { content:'›'; color:rgba(232,235,255,.45); } .lp-crumbs a { color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px; } .lp-crumbs a:hover { text-decoration-color:#fff; } .lp-hero-grid { padding-top:34px; } .lp-hero .gp-hero-desc.lp-answer { max-width:580px; font-size:17px; } .lp-hero .gp-hero-art { min-height:360px; } .lp-art-duo { gap:0; } .lp-float-pos { right:-6px; bottom:-10px; animation-delay:-2s; } .lp-narrow { max-width:920px; } .lp-brief { padding:72px 0 8px; } .lp-brief h2, .lp-text h2 { font-size:clamp(26px, 2.8vw, 38px); letter-spacing:-1.2px; margin:6px 0 22px; color:var(--ink); } .lp-facts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:0; } .lp-facts div { padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:#fff; } .lp-facts dt { font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--pink-text); margin-bottom:5px; } .lp-facts dd { margin:0; color:var(--ink); font-weight:600; line-height:1.5; } .lp-section { padding:80px 0; } .lp-text { padding:72px 0; } .lp-copy > p { font-size:17px; line-height:1.7; margin:0 0 18px; } .ft-theme-copy.lp-copy > p:not(.eyebrow):not(.ft-mods) { font-size:17px; margin:0 0 18px; } .lp-copy h2 { overflow-wrap:anywhere; } .lp-steps { counter-reset:lp; list-style:none; margin:6px 0 20px; padding:0; display:grid; gap:12px; } .lp-steps li { counter-increment:lp; position:relative; padding:4px 0 4px 50px; line-height:1.6; color:var(--text); } .lp-steps li::before { content:counter(lp); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:15px; color:#fff; background:var(--gp-warm); } .lp-list { list-style:none; margin:4px 0 20px; padding:0; display:grid; gap:10px; } .lp-list li { display:flex; gap:10px; align-items:flex-start; line-height:1.55; color:var(--text); } .lp-list .icon { flex:0 0 18px; width:18px; height:18px; margin-top:3px; color:#0b8a56; } .lp-table-wrap { margin:8px 0 20px; border:1px solid var(--line); border-radius:16px; overflow-x:auto; background:#fff; } .lp-table { width:100%; border-collapse:collapse; font-size:15px; } .lp-table th, .lp-table td { padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); line-height:1.5; } .lp-table thead th { font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:#687085; background:var(--paper); font-weight:800; } .lp-table tbody th { color:var(--ink); font-weight:700; font-size:15px; letter-spacing:0; text-transform:none; white-space:normal; } .lp-table tbody td { color:var(--text); } .lp-table tbody tr:last-child th, .lp-table tbody tr:last-child td { border-bottom:0; } .lp-note { display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:#eef4ff; color:#1d3f8f; font-size:15px; line-height:1.55; margin:8px 0 0; } .lp-note .icon { flex:0 0 18px; width:18px; height:18px; margin-top:2px; } .lp-more { margin:14px 0 0; } .lp-related { padding:96px 0 0; } .lp-rel-grid { margin-top:0; } .ft-guides { padding:96px 0 0; } .lp-rel-6 { grid-template-columns:repeat(3, minmax(0, 1fr)); } .gp-ops-card .ft-mod-ic { margin-bottom:14px; } /* pied de page : liens vers les pages thématiques */ .gp-foot-sol { flex-basis:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 32px; padding:22px 0 6px; border-top:1px solid #f0dbe5; font-size:13px; } .gp-foot-col { display:flex; flex-direction:column; gap:9px; min-width:0; } @media(max-width:900px){ .gp-foot-sol { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:480px){ .gp-foot-sol { grid-template-columns:1fr; } } .gp-foot-sol b { font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--pink-text); margin-bottom:2px; } .gp-foot-sol a { color:var(--text); } .gp-foot-sol a:hover { color:var(--pink-text); text-decoration:underline; } html[data-theme="dark"] .lp-facts div, html[data-theme="dark"] .lp-table-wrap { background:#141833; border-color:#262b4d; } html[data-theme="dark"] .lp-table thead th { background:#1a1f3d; color:#9aa1bf; } html[data-theme="dark"] .lp-table th, html[data-theme="dark"] .lp-table td { border-color:#262b4d; } html[data-theme="dark"] .lp-facts dd, html[data-theme="dark"] .lp-table tbody th { color:#eef0fb; } html[data-theme="dark"] .lp-note { background:rgba(43,117,243,.16); color:#a9d1ff; } html[data-theme="dark"] .lp-list .icon { color:#5fe0a8; } html[data-theme="dark"] .gp-foot-sol a { color:var(--dk-text); } @media (max-width:900px) { .lp-rel-6 { grid-template-columns:1fr 1fr; } .lp-hero .gp-hero-art { min-height:0; } } @media (max-width:640px) { .lp-facts { grid-template-columns:1fr; } .lp-brief { padding-top:52px; } .lp-section, .lp-text { padding:56px 0; } .lp-rel-6 { grid-template-columns:1fr; } .lp-table { font-size:14px; } .lp-table th, .lp-table td { padding:10px 12px; } .lp-float-pos { display:none; } } @media (max-width:760px) { .lp-art-duo { flex-direction:column; } } /* cartes blanches (ticket, cartes flottantes) : texte foncé aussi en mode sombre */ html[data-theme="dark"] .gp-ticket, html[data-theme="dark"] .gp-float { --ink:#0b1044; --text:#535973; --pink-text:#c8105c; color:#0b1044; } /* ── Fonctionnalités par domaine (cartes de modules) ── */ .dm-section { padding:88px 0; scroll-margin-top:80px; position:relative; } .dm-section:nth-of-type(even) { background:var(--paper); } .dm-head { display:grid; grid-template-columns:minmax(0, 1fr); gap:56px; align-items:center; margin-bottom:40px; } .dm-head.has-screen { grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); } .dm-head.has-screen.is-reverse .dm-copy { order:2; } .dm-head.has-screen.is-reverse { grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); } .dm-copy h2 { font-size:clamp(28px, 3vw, 42px); letter-spacing:-1.4px; margin:0 0 14px; } .dm-copy > p:not(.eyebrow) { font-size:18px; margin:0; max-width:620px; } .dm-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; } .dm-card { display:flex; flex-direction:column; scroll-margin-top:90px; padding:22px; border-radius:20px; border:1px solid var(--line); background:#fff; transition:transform .2s, box-shadow .2s; } .dm-card:hover { transform:translateY(-3px); box-shadow:0 22px 40px -28px rgba(11,16,68,.45); } .dm-card:target { border-color:#f61a74; box-shadow:0 0 0 4px rgba(246,26,116,.14); } .dm-card h3 { font-size:17.5px; margin:0 0 10px; } .dm-card h3 a { color:inherit; } .dm-card h3 a:hover { color:var(--pink-text); } .dm-card ul { list-style:none; margin:0; padding:0; display:grid; gap:7px; } .dm-card li { display:flex; gap:8px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:var(--text); } .dm-card li .icon { flex:none; width:16px; height:16px; margin-top:3px; color:#12b76a; } .dm-more { display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:14px; font-size:14px; font-weight:800; color:var(--pink-text); } .dm-more .icon { width:16px; height:16px; } .dm-note { margin:20px 0 0; } html[data-theme="dark"] .dm-card { background:#141833; border-color:#262b4d; } html[data-theme="dark"] .dm-card h3 { color:#eef0fb; } html[data-theme="dark"] .dm-card li { color:#c3c7e2; } @media (max-width:1100px) { .dm-head.has-screen, .dm-head.has-screen.is-reverse { grid-template-columns:1fr; gap:32px; } .dm-head.has-screen.is-reverse .dm-copy { order:0; } .dm-grid { grid-template-columns:1fr 1fr; } } @media (max-width:700px) { .dm-section { padding:60px 0; } .dm-head { margin-bottom:26px; } .dm-copy > p:not(.eyebrow) { font-size:16px; } .dm-grid { grid-template-columns:1fr; gap:12px; } .dm-card { padding:18px; } } /* ── Accueil : modules phares et métiers ── */ .hm-phares { padding:96px 0; } .hm-phares-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; } .hm-phare { display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:20px; border:1px solid var(--line); background:#fff; color:inherit; transition:transform .2s, box-shadow .2s; } .hm-phare:hover { transform:translateY(-3px); box-shadow:0 22px 40px -28px rgba(11,16,68,.45); } .hm-phare b { font-size:17px; color:var(--ink); } .hm-phare small { font-size:14px; line-height:1.5; color:var(--text); } .hm-phare .ft-mod-ic { margin-bottom:4px; } .hm-phare em { margin-top:auto; font-style:normal; font-size:14px; font-weight:800; color:var(--pink-text); display:inline-flex; align-items:center; gap:6px; } .hm-phare em .icon { width:16px; height:16px; } .hm-domaines { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .hm-domaines a { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:14px; font-weight:700; color:var(--ink); } .hm-domaines a:hover { border-color:#f61a7455; color:var(--pink-text); } .hm-domaines .icon { width:17px; height:17px; color:var(--pink-text); } .hm-metiers { padding:96px 0; background:var(--paper); } .hm-metiers-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; } .hm-metier { padding:24px; border-radius:20px; border:1px solid var(--line); background:#fff; } .hm-metier h3 { display:flex; align-items:center; gap:12px; font-size:19px; margin:0 0 6px; } .hm-metier h3 .ft-mod-ic { margin:0; width:42px; height:42px; } .hm-metier > p { font-size:14.5px; margin:0 0 14px; } .hm-metier ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .hm-metier li a { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#535973; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:#fff; } .hm-metier li a:hover { color:var(--pink-text); border-color:#f61a7455; } .hm-metier li .icon { width:15px; height:15px; } html[data-theme="dark"] .hm-phare, html[data-theme="dark"] .hm-metier, html[data-theme="dark"] .hm-domaines a, html[data-theme="dark"] .hm-metier li a { background:#141833; border-color:#262b4d; color:#eef0fb; } html[data-theme="dark"] .hm-phare b { color:#eef0fb; } html[data-theme="dark"] .hm-phare small { color:#c3c7e2; } @media (max-width:1100px) { .hm-phares-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } .hm-metiers-grid { grid-template-columns:1fr 1fr; } } @media (max-width:700px) { .hm-phares, .hm-metiers { padding:60px 0; } .hm-phares-grid { grid-template-columns:1fr; gap:12px; } .hm-metiers-grid { grid-template-columns:1fr; gap:12px; } } .hm-phares .hm-phares-lead { max-width:780px; margin:-10px 0 30px; font-size:17px; } /* Bloc « Votre facturation, prête pour la TTN » (accueil) : texte non bridé, capture entière dans un cadre arrondi */ @media(min-width:1101px){ .studio-bottom .management{grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr) minmax(0,1.25fr);padding:28px 28px 28px 48px;gap:28px;min-height:0;align-items:center} } .studio-bottom .management p{max-width:none} .studio-bottom .management picture{height:auto;align-self:center} .studio-bottom .management img,html[dir=rtl] .studio-bottom .management img{height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:14px;border:1px solid #f0d6e2;box-shadow:0 18px 40px rgba(11,16,68,.16)} .studio-bottom .integration-tag{margin:10px 6px 0 0} @media(min-width:1101px) and (max-width:1360px){.studio-bottom .management{padding-inline-start:32px;gap:22px}} html[data-theme="dark"] .gp-foot-sol { border-color:var(--dk-line); } /* Pied de page : la grille des solutions l'emporte sur la règle flex générique des