/* Ru2f Solutions — feuille de style centralisée */ :root { --ru2f-blue-950: #062f55; --ru2f-blue-900: #073e70; --ru2f-blue-800: #0b4f88; --ru2f-blue-700: #126ba2; --ru2f-cyan-500: #1da9c7; --ru2f-green-700: #087a54; --ru2f-green-600: #0b9d68; --ru2f-green-500: #22bd7a; --ru2f-green-100: #daf7e9; --ink-950: #102333; --ink-800: #263b4b; --ink-650: #526575; --ink-500: #748491; --line: #dce7ee; --line-strong: #c5d6e0; --surface: #ffffff; --surface-soft: #f4f8fb; --surface-blue: #edf6fb; --danger: #a61b31; --danger-soft: #fff0f3; --success: #08734e; --success-soft: #e8f8f0; --shadow-sm: 0 10px 30px rgba(13, 55, 84, 0.08); --shadow-md: 0 24px 70px rgba(13, 55, 84, 0.13); --radius-sm: 12px; --radius-md: 22px; --radius-lg: 36px; --container: 1180px; --header-height: 82px; --ease: 180ms ease; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); } body { margin: 0; min-width: 320px; color: var(--ink-950); background: var(--surface); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.nav-open { overflow: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: var(--ru2f-blue-800); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } a:hover { color: var(--ru2f-green-700); } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(29, 169, 199, 0.42); outline-offset: 3px; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { color: var(--ink-950); font-weight: 780; line-height: 1.12; letter-spacing: -0.035em; } h1 { margin-bottom: 1.4rem; font-size: clamp(2.55rem, 5.6vw, 5.5rem); } h2 { margin-bottom: 1rem; font-size: clamp(2rem, 3.6vw, 3.4rem); } h3 { margin-bottom: 0.65rem; font-size: clamp(1.2rem, 2vw, 1.55rem); } p { color: var(--ink-650); } ul, ol, dl { margin-top: 0; } .container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; } .section { padding-block: clamp(76px, 9vw, 132px); } .section-soft { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: radial-gradient(circle at 5% 10%, rgba(29, 169, 199, 0.08), transparent 35%), radial-gradient(circle at 95% 85%, rgba(34, 189, 122, 0.08), transparent 32%), var(--surface-soft); } .eyebrow { margin-bottom: 0.85rem; color: var(--ru2f-green-700); font-size: 0.77rem; font-weight: 820; letter-spacing: 0.16em; line-height: 1.3; text-transform: uppercase; } .skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 12px 16px; color: #fff; background: var(--ru2f-blue-950); border-radius: 8px; transform: translateY(-160%); transition: transform var(--ease); } .skip-link:focus { color: #fff; transform: translateY(0); } /* En-tête */ .site-header { position: sticky; z-index: 100; top: 0; min-height: var(--header-height); border-bottom: 1px solid transparent; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px); transition: box-shadow var(--ease), border-color var(--ease), background var(--ease); } .site-header.is-scrolled { border-color: rgba(197, 214, 224, 0.8); background: rgba(255, 255, 255, 0.97); box-shadow: 0 12px 36px rgba(13, 55, 84, 0.07); } .header-inner { display: flex; min-height: var(--header-height); align-items: center; justify-content: space-between; gap: 32px; } .brand { display: inline-flex; min-width: 0; align-items: center; gap: 12px; color: var(--ink-950); text-decoration: none; } .brand:hover { color: var(--ink-950); } .brand img { width: 48px; height: 56px; object-fit: contain; } .brand-copy { display: grid; gap: 1px; min-width: 0; } .brand-copy strong { color: var(--ru2f-blue-900); font-size: 1.05rem; letter-spacing: -0.02em; white-space: nowrap; } .brand-copy small { color: var(--ink-500); font-size: 0.72rem; letter-spacing: 0.02em; white-space: nowrap; } .main-nav { display: flex; align-items: center; gap: 5px; } .main-nav > a:not(.button) { padding: 10px 12px; color: var(--ink-800); border-radius: 9px; font-size: 0.91rem; font-weight: 680; text-decoration: none; transition: color var(--ease), background var(--ease); } .main-nav > a:not(.button):hover, .main-nav > a[aria-current="page"]:not(.button) { color: var(--ru2f-blue-900); background: var(--surface-blue); } .nav-toggle { display: none; align-items: center; gap: 10px; padding: 10px 12px; color: var(--ink-950); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font-weight: 700; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 20px; height: 2px; background: currentColor; transition: transform var(--ease), opacity var(--ease); } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before, .nav-toggle-bars::after { position: absolute; left: 0; content: ""; } .nav-toggle-bars::before { transform: translateY(-6px); } .nav-toggle-bars::after { transform: translateY(6px); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: rotate(-45deg); } /* Boutons et liens */ .button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 13px 21px; color: #fff; border: 1px solid var(--ru2f-blue-800); border-radius: 12px; background: linear-gradient(135deg, var(--ru2f-blue-900), var(--ru2f-blue-700)); box-shadow: 0 12px 28px rgba(11, 79, 136, 0.18); font-weight: 760; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease); } .button:hover { color: #fff; border-color: var(--ru2f-green-700); background: linear-gradient(135deg, var(--ru2f-blue-900), var(--ru2f-green-700)); box-shadow: 0 16px 34px rgba(8, 122, 84, 0.19); transform: translateY(-2px); } .button:active { transform: translateY(0); } .button:disabled { opacity: 0.62; cursor: progress; transform: none; } .button-small { min-height: 42px; margin-left: 8px; padding: 10px 15px; border-radius: 10px; font-size: 0.88rem; } .button-secondary { color: var(--ru2f-blue-900); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.88); box-shadow: none; } .button-secondary:hover { color: var(--ru2f-blue-950); border-color: var(--ru2f-cyan-500); background: #fff; box-shadow: var(--shadow-sm); } .button-light { color: var(--ru2f-blue-950); border-color: #fff; background: #fff; box-shadow: 0 18px 40px rgba(1, 35, 63, 0.2); } .button-light:hover { color: var(--ru2f-blue-950); border-color: var(--ru2f-green-100); background: var(--ru2f-green-100); } .text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 770; text-decoration: none; } .text-link span { transition: transform var(--ease); } .text-link:hover span { transform: translateX(4px); } /* Accueil */ .hero { position: relative; overflow: hidden; min-height: min(820px, calc(100vh - var(--header-height))); background: radial-gradient(circle at 85% 18%, rgba(29, 169, 199, 0.10), transparent 38%), linear-gradient(90deg, #f7fbfd, #f3fafb 70%, #f8fcfa); } .hero::before { position: absolute; width: 560px; height: 560px; top: -330px; left: -190px; border-radius: 50%; background: radial-gradient(circle, rgba(29, 169, 199, 0.14), transparent 68%); content: ""; } .hero-grid { position: relative; display: grid; min-height: min(820px, calc(100vh - var(--header-height))); align-items: center; gap: clamp(42px, 7vw, 94px); grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr); padding-block: clamp(70px, 8vw, 110px); } .hero-copy { position: relative; z-index: 2; max-width: 710px; } .hero-copy h1 { max-width: 800px; margin-bottom: 1.6rem; color: var(--ru2f-blue-950); } .hero-lead { max-width: 690px; margin-bottom: 2rem; color: var(--ink-650); font-size: clamp(1.12rem, 1.8vw, 1.35rem); line-height: 1.65; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .trust-list { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 28px 0 0; padding: 0; color: var(--ink-650); list-style: none; font-size: 0.91rem; font-weight: 680; } .trust-list li { position: relative; padding-left: 19px; } .trust-list li::before { position: absolute; top: 0.62em; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ru2f-green-500); box-shadow: 0 0 0 5px rgba(34, 189, 122, 0.12); content: ""; transform: translateY(-50%); } .hero-visual { position: relative; min-height: 540px; isolation: isolate; } .hero-visual::before { position: absolute; z-index: -2; inset: 6% 0 0 12%; border: 1px solid rgba(18, 107, 162, 0.16); border-radius: 48% 52% 46% 54% / 48% 45% 55% 52%; background: radial-gradient(circle at 68% 22%, rgba(34, 189, 122, 0.28), transparent 25%), radial-gradient(circle at 26% 78%, rgba(29, 169, 199, 0.24), transparent 30%), rgba(255, 255, 255, 0.74); box-shadow: var(--shadow-md); content: ""; transform: rotate(-4deg); } .split-heading { display: grid; align-items: end; gap: clamp(32px, 8vw, 110px); grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); margin-bottom: 48px; } .split-heading h2 { max-width: 770px; margin-bottom: 0; } .split-heading > p { margin-bottom: 0.5rem; font-size: 1.06rem; } .card-grid { display: grid; gap: 22px; } .card-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-card, .sector-card { position: relative; overflow: hidden; padding: clamp(26px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 5px 18px rgba(13, 55, 84, 0.035); transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); } .feature-card::after, .sector-card::after { position: absolute; right: -56px; bottom: -56px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 189, 122, 0.12), transparent 68%); content: ""; } .feature-card:hover, .sector-card:hover { border-color: rgba(29, 169, 199, 0.45); box-shadow: var(--shadow-sm); transform: translateY(-5px); } .feature-card p, .sector-card p { margin-bottom: 0; } .solution-showcase { display: grid; align-items: start; gap: clamp(48px, 9vw, 130px); grid-template-columns: 0.85fr 1.15fr; } .showcase-copy { position: sticky; top: calc(var(--header-height) + 35px); } .showcase-copy p:not(.eyebrow) { font-size: 1.05rem; } .solution-list { display: grid; border-top: 1px solid var(--line-strong); } .solution-list a { display: grid; gap: 5px; padding: 24px 4px; color: var(--ink-950); border-bottom: 1px solid var(--line-strong); text-decoration: none; grid-template-columns: minmax(0, 1fr); transition: padding var(--ease), color var(--ease), background var(--ease); } .solution-list a::after { position: absolute; } .solution-list a:hover { padding-left: 14px; color: var(--ru2f-blue-800); background: linear-gradient(90deg, rgba(29, 169, 199, 0.07), transparent); } .solution-list span { font-size: 1.28rem; font-weight: 770; letter-spacing: -0.02em; } .solution-list small { color: var(--ink-500); font-size: 0.9rem; } .process-grid { display: grid; align-items: start; gap: clamp(48px, 10vw, 140px); grid-template-columns: minmax(0, 0.83fr) minmax(0, 1.17fr); } .process-intro { position: sticky; top: calc(var(--header-height) + 35px); } .process-intro > p:not(.eyebrow) { font-size: 1.05rem; } .steps-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .steps-list li { display: grid; gap: 22px; padding: 30px 0; border-bottom: 1px solid var(--line); grid-template-columns: 56px 1fr; } .steps-list li:first-child { padding-top: 0; } .steps-list > li > span { display: grid; width: 50px; height: 50px; place-items: center; color: #fff; border-radius: 15px; background: linear-gradient(145deg, var(--ru2f-blue-900), var(--ru2f-green-600)); box-shadow: 0 12px 26px rgba(8, 122, 84, 0.17); font-size: 0.88rem; font-weight: 820; } .steps-list p { margin-bottom: 0; } .cta-section { padding-top: 0; } .cta-panel { position: relative; display: flex; overflow: hidden; min-height: 250px; align-items: center; justify-content: space-between; gap: 36px; padding: clamp(38px, 6vw, 70px); color: #fff; border-radius: var(--radius-lg); background: radial-gradient(circle at 96% 8%, rgba(34, 189, 122, 0.24), transparent 39%), linear-gradient(105deg, var(--ru2f-blue-950), var(--ru2f-blue-800) 55%, var(--ru2f-green-700)); box-shadow: var(--shadow-md); } .cta-panel::after { position: absolute; width: 330px; height: 330px; right: -145px; bottom: -230px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; content: ""; } .cta-panel > * { position: relative; z-index: 1; } .cta-panel h2 { max-width: 760px; margin-bottom: 0; color: #fff; } .cta-panel .eyebrow { color: #a9f0cf; } /* Héros intérieurs */ .page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 89% 25%, rgba(29, 169, 199, 0.09), transparent 42%), linear-gradient(90deg, #f6fafc, #f0f8fb); } .page-hero::after { position: absolute; width: 420px; height: 420px; right: -230px; bottom: -260px; border: 1px solid rgba(18, 107, 162, 0.18); border-radius: 50%; content: ""; } .page-hero-grid { position: relative; z-index: 1; display: grid; min-height: 440px; align-items: center; gap: clamp(45px, 9vw, 130px); grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.55fr); padding-block: clamp(68px, 8vw, 104px); } .page-hero h1 { max-width: 900px; margin-bottom: 1.25rem; color: var(--ru2f-blue-950); font-size: clamp(2.6rem, 5vw, 4.8rem); } .page-hero-grid > div > p:last-child { max-width: 760px; margin-bottom: 0; font-size: clamp(1.06rem, 1.7vw, 1.28rem); } .page-hero-note { padding: 27px 28px; border: 1px solid rgba(197, 214, 224, 0.86); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.85); box-shadow: var(--shadow-sm); backdrop-filter: blur(12px); } .page-hero-note strong { display: block; margin-bottom: 8px; color: var(--ru2f-green-700); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; } .page-hero-note p { margin-bottom: 0; color: var(--ink-800); } .page-hero-compact .page-hero-grid { min-height: 350px; } /* Solutions et fonctionnalités */ .solution-sections { display: grid; gap: 0; } .solution-detail { display: grid; gap: clamp(28px, 6vw, 78px); padding-block: 64px; border-bottom: 1px solid var(--line); grid-template-columns: minmax(90px, 0.28fr) minmax(0, 1.5fr); } .solution-detail:first-child { padding-top: 0; } .solution-detail:last-child { padding-bottom: 0; border-bottom: 0; } .solution-detail > div:last-child { max-width: 820px; } .solution-number { color: transparent; -webkit-text-stroke: 1px rgba(11, 79, 136, 0.48); font-size: clamp(3.8rem, 9vw, 7.8rem); font-weight: 850; letter-spacing: -0.08em; line-height: 0.9; } .check-list, .large-check-list { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; } .check-list li, .large-check-list li { position: relative; padding-left: 30px; color: var(--ink-800); } .check-list li::before, .large-check-list li::before { position: absolute; top: 0.67em; left: 0; width: 16px; height: 16px; border: 2px solid var(--ru2f-green-600); border-radius: 50%; content: ""; transform: translateY(-50%); } .check-list li::after, .large-check-list li::after { position: absolute; top: calc(0.67em - 1px); left: 5px; width: 6px; height: 3px; border-bottom: 2px solid var(--ru2f-green-700); border-left: 2px solid var(--ru2f-green-700); content: ""; transform: translateY(-50%) rotate(-45deg); } .feature-catalog .feature-card h2 { font-size: 1.5rem; } .large-check-list { gap: 0; margin: 0; } .large-check-list li { padding: 21px 0 21px 44px; border-bottom: 1px solid var(--line); font-size: 1.04rem; font-weight: 680; } .large-check-list li:first-child { padding-top: 5px; } .large-check-list li::before { left: 4px; width: 24px; height: 24px; background: var(--green-100, #daf7e9); } .large-check-list li::after { top: calc(0.67em + 9px); left: 11px; width: 8px; height: 4px; } /* Secteurs */ .sector-card { min-height: 260px; } .sector-card > span { display: inline-flex; margin-bottom: 26px; padding: 7px 11px; color: var(--ru2f-green-700); border: 1px solid var(--ru2f-green-100); border-radius: 999px; background: rgba(218, 247, 233, 0.56); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 12px; } .tag-cloud span { padding: 12px 18px; color: var(--ru2f-blue-950); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); box-shadow: 0 5px 18px rgba(13, 55, 84, 0.035); font-weight: 690; } /* À propos */ .story-grid { display: grid; gap: clamp(50px, 10vw, 150px); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .prose { max-width: 760px; } .prose p { font-size: 1.08rem; } .values-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .values-grid article { min-height: 310px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } .values-grid span { display: block; margin-bottom: 50px; color: var(--ru2f-green-700); font-size: 0.75rem; font-weight: 820; letter-spacing: 0.12em; } .values-grid h2 { font-size: 1.48rem; } .values-grid p { margin-bottom: 0; } /* Contact */ .contact-grid { display: grid; align-items: start; gap: clamp(50px, 9vw, 125px); grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr); } .contact-intro { position: sticky; top: calc(var(--header-height) + 34px); } .contact-intro h2 { font-size: clamp(2rem, 3.3vw, 3.25rem); } .contact-facts { display: grid; gap: 18px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); } .contact-facts > div { display: grid; gap: 4px; } .contact-facts strong { color: var(--ink-500); font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; } .contact-facts a, .contact-facts span { color: var(--ink-950); font-weight: 680; } .form-card { padding: clamp(25px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); } .form-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-field { display: grid; gap: 8px; } .form-field-full { grid-column: 1 / -1; } .form-field label, .consent-field { color: var(--ink-800); font-size: 0.9rem; font-weight: 730; } .form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; color: var(--ink-950); border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); } .form-field textarea { min-height: 180px; resize: vertical; } .form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: #9bbacb; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--ru2f-cyan-500); box-shadow: 0 0 0 4px rgba(29, 169, 199, 0.11); } .field-error { margin: 0; color: var(--danger); font-size: 0.83rem; font-weight: 650; } .consent-field { display: grid; align-items: start; gap: 12px; margin-top: 25px; grid-template-columns: 20px 1fr; cursor: pointer; } .consent-field input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--ru2f-green-700); } .recaptcha-wrap { display: grid; gap: 10px; margin-top: 24px; overflow: auto; } .recaptcha-title { margin: 0; color: var(--ink-800); font-size: 0.9rem; font-weight: 730; } .recaptcha-legal { max-width: 620px; margin: 0; color: var(--ink-500); font-size: 0.76rem; line-height: 1.55; } .recaptcha-legal a { color: var(--ru2f-blue-800); } .form-submit { width: 100%; margin-top: 26px; } .form-note { margin: 13px 0 0; color: var(--ink-500); font-size: 0.8rem; text-align: center; } .field-trap { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .alert { margin-bottom: 24px; padding: 14px 16px; border: 1px solid; border-radius: 10px; font-weight: 650; } .alert-success { color: var(--success); border-color: #a9dec7; background: var(--success-soft); } .alert-error { color: var(--danger); border-color: #efb8c3; background: var(--danger-soft); } /* Pages légales */ .legal-section { background: var(--surface-soft); } .legal-layout { display: grid; align-items: start; gap: clamp(48px, 8vw, 110px); grid-template-columns: 250px minmax(0, 1fr); } .legal-nav { position: sticky; top: calc(var(--header-height) + 30px); display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); } .legal-nav strong { padding: 18px 20px; color: var(--ru2f-blue-950); border-bottom: 1px solid var(--line); font-size: 0.83rem; letter-spacing: 0.08em; text-transform: uppercase; } .legal-nav a { padding: 12px 20px; color: var(--ink-650); border-bottom: 1px solid var(--line); font-size: 0.88rem; text-decoration: none; } .legal-nav a:last-child { border-bottom: 0; } .legal-nav a:hover { color: var(--ru2f-blue-900); background: var(--surface-blue); } .legal-content { display: grid; gap: 26px; } .legal-introduction { padding: 22px 24px; color: var(--ink-800); border: 1px solid rgba(29, 169, 199, 0.28); border-left: 4px solid var(--ru2f-cyan-500); border-radius: 14px; background: linear-gradient(135deg, rgba(227, 246, 250, 0.72), rgba(255, 255, 255, 0.96)); } .legal-introduction p { margin: 0; } .legal-content article { scroll-margin-top: calc(var(--header-height) + 28px); padding: clamp(26px, 4vw, 46px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } .legal-content article h2 { font-size: clamp(1.65rem, 2.8vw, 2.35rem); } .legal-content article > p:last-child { margin-bottom: 0; } .legal-data { display: grid; margin: 0; } .legal-data > div { display: grid; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--line); grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1fr); } .legal-data > div:last-child { border-bottom: 0; } .legal-data dt { color: var(--ink-500); font-size: 0.83rem; font-weight: 730; } .legal-data dd { margin: 0; color: var(--ink-950); font-weight: 620; } .table-wrap { max-width: 100%; margin: 24px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; } table { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--surface); } th, td { padding: 15px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } th { color: var(--ru2f-blue-950); background: var(--surface-blue); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; } td { color: var(--ink-650); font-size: 0.91rem; } tr:last-child td { border-bottom: 0; } /* Erreurs */ .error-page { display: grid; min-height: calc(100vh - var(--header-height)); place-items: center; padding-block: 80px; background: radial-gradient(circle at 88% 32%, rgba(29, 169, 199, 0.10), transparent 44%), linear-gradient(90deg, #f6fafc, #f1f8fa); } .error-inner { max-width: 780px; text-align: center; } .error-code { margin-bottom: 0; color: transparent; -webkit-text-stroke: 1px rgba(11, 79, 136, 0.35); font-size: clamp(7rem, 20vw, 14rem); font-weight: 880; letter-spacing: -0.08em; line-height: 0.82; } .error-inner .hero-actions { justify-content: center; margin-top: 30px; } /* Pied de page */ .site-footer { color: rgba(255, 255, 255, 0.82); background: radial-gradient(circle at 96% 8%, rgba(29, 169, 199, 0.12), transparent 42%), linear-gradient(115deg, #052949, var(--ru2f-blue-900)); } .footer-grid { display: grid; gap: clamp(35px, 6vw, 80px); padding-block: 72px 54px; grid-template-columns: 1.5fr repeat(3, 0.75fr); } .brand-footer { margin-bottom: 18px; } .brand-footer .brand-copy strong, .brand-footer .brand-copy small { color: #fff; } .footer-brand > p { max-width: 340px; color: rgba(255, 255, 255, 0.68); } .site-footer h2 { margin-bottom: 18px; color: #fff; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; } .site-footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .site-footer a, .site-footer li { color: rgba(255, 255, 255, 0.72); font-size: 0.88rem; text-decoration: none; } .site-footer a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; gap: 22px; padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, 0.13); } .footer-bottom p { margin: 0; color: rgba(255, 255, 255, 0.54); font-size: 0.78rem; } /* Responsive */ @media (max-width: 1080px) { .main-nav { gap: 0; } .main-nav > a:not(.button) { padding-inline: 9px; font-size: 0.86rem; } .hero-grid { gap: 45px; grid-template-columns: minmax(0, 1fr) minmax(330px, 0.82fr); } .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1.35fr repeat(3, 0.8fr); gap: 34px; } } @media (max-width: 900px) { :root { --header-height: 72px; } .container { width: min(calc(100% - 32px), var(--container)); } .nav-toggle { display: inline-flex; } .main-nav { position: fixed; z-index: 99; top: var(--header-height); right: 0; left: 0; display: grid; max-height: calc(100vh - var(--header-height)); overflow-y: auto; padding: 18px 16px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.99); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translateY(-12px); transition: opacity var(--ease), transform var(--ease); } .main-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); } .no-js .nav-toggle { display: none; } .no-js .main-nav { position: static; display: flex; max-height: none; padding: 0; border: 0; background: transparent; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; } .main-nav > a:not(.button) { padding: 14px 12px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1rem; } .main-nav .button { width: 100%; margin: 16px 0 0; } .hero-grid { min-height: auto; grid-template-columns: 1fr; } .hero-copy { max-width: none; } .hero-visual { min-height: 480px; max-width: 660px; width: 100%; margin-inline: auto; } .split-heading, .solution-showcase, .process-grid, .story-grid, .contact-grid { gap: 42px; grid-template-columns: 1fr; } .showcase-copy, .process-intro, .contact-intro { position: static; } .page-hero-grid { grid-template-columns: 1fr; gap: 30px; } .page-hero-note { max-width: 620px; } .card-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .legal-layout { grid-template-columns: 1fr; } .legal-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .legal-nav strong { grid-column: 1 / -1; } .legal-nav a:nth-last-child(1):nth-child(even) { border-bottom: 0; } .footer-grid { grid-template-columns: 1.2fr repeat(2, 1fr); } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 680px) { .no-js .header-inner { align-items: flex-start; flex-direction: column; padding-block: 12px; } .no-js .main-nav { width: 100%; align-items: stretch; flex-direction: column; } .section { padding-block: 68px; } .brand-copy small { display: none; } .hero { background: radial-gradient(circle at 95% 14%, rgba(29, 169, 199, 0.09), transparent 40%), linear-gradient(125deg, #f8fcfd, #f0f9fa); } .hero-grid { padding-block: 58px 70px; } .hero-copy h1 { font-size: clamp(2.55rem, 13vw, 4rem); } .hero-actions { align-items: stretch; flex-direction: column; } .hero-actions .button { width: 100%; } .trust-list { align-items: flex-start; flex-direction: column; } .hero-visual { min-height: 420px; } .card-grid-three, .card-grid-two, .values-grid { grid-template-columns: 1fr; } .feature-card, .sector-card { min-height: 0; } .solution-detail { gap: 18px; padding-block: 46px; grid-template-columns: 1fr; } .solution-number { font-size: 4.5rem; } .steps-list li { gap: 16px; grid-template-columns: 48px 1fr; } .steps-list > li > span { width: 44px; height: 44px; } .cta-panel { align-items: flex-start; flex-direction: column; border-radius: 24px; } .cta-panel .button { width: 100%; } .page-hero-grid { min-height: 360px; padding-block: 58px; } .page-hero h1 { font-size: clamp(2.4rem, 12vw, 3.6rem); } .form-grid { grid-template-columns: 1fr; } .form-field-full { grid-column: auto; } .form-card { border-radius: 20px; } .legal-nav { grid-template-columns: 1fr; } .legal-nav strong, .legal-nav a { grid-column: auto; } .legal-data > div { gap: 4px; grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .footer-bottom { align-items: flex-start; flex-direction: column; } } @media (max-width: 440px) { .container { width: min(calc(100% - 24px), var(--container)); } .brand img { width: 40px; height: 47px; } .brand-copy strong { font-size: 0.96rem; } .nav-toggle span:first-child { display: none; } .hero-visual { min-height: 375px; } .footer-grid { grid-template-columns: 1fr; } .footer-brand { grid-column: auto; } .g-recaptcha { transform: scale(0.88); transform-origin: left top; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } @media print { .site-header, .site-footer, .nav-toggle, .button, .legal-nav { display: none !important; } body { color: #000; background: #fff; font-size: 11pt; } .section, .page-hero-grid { padding-block: 24px; } .legal-layout { display: block; } .legal-content article { break-inside: avoid; border: 0; box-shadow: none; padding-inline: 0; } a { color: #000; text-decoration: underline; } } /* Contrôle automatisé de production */ .audit-hero .page-hero-grid { min-height: 390px; } .audit-hero-note { border-color: rgba(34, 189, 122, 0.35); background: linear-gradient(145deg, rgba(7, 62, 112, 0.96), rgba(8, 122, 84, 0.94)); } .audit-section { padding-top: 64px; background: var(--surface-soft); } .audit-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; } .audit-toolbar h2 { margin-bottom: 8px; font-size: clamp(1.85rem, 3vw, 2.8rem); } .audit-toolbar p:last-child { margin-bottom: 0; } .audit-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .audit-actions .button { min-height: 46px; border: 0; cursor: pointer; } .audit-actions .button:disabled { cursor: wait; opacity: 0.55; } .button-ghost { color: var(--ru2f-blue-900); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); } .button-ghost:hover { color: var(--ru2f-green-700); background: var(--surface); } .audit-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; } .audit-summary-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); } .audit-summary-card span { color: var(--ink-650); font-size: 0.88rem; font-weight: 720; } .audit-summary-card strong { color: var(--ink-950); font-size: 1.8rem; line-height: 1; } .audit-summary-pass strong { color: var(--success); } .audit-summary-warning strong { color: #8a5a00; } .audit-summary-fail strong { color: var(--danger); } .audit-progress-wrap { margin-bottom: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .audit-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; color: var(--ink-650); font-size: 0.88rem; } .audit-progress-copy strong { color: var(--ink-950); } .audit-progress { display: block; width: 100%; height: 12px; overflow: hidden; border: 0; border-radius: 999px; background: var(--line); } .audit-progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; } .audit-progress::-webkit-progress-value { background: linear-gradient(90deg, var(--ru2f-blue-700), var(--ru2f-green-500)); border-radius: 999px; } .audit-progress::-moz-progress-bar { background: linear-gradient(90deg, var(--ru2f-blue-700), var(--ru2f-green-500)); border-radius: 999px; } .audit-status-banner { display: grid; gap: 4px; margin-bottom: 28px; padding: 18px 20px; border: 1px solid var(--line); border-left-width: 5px; border-radius: var(--radius-sm); background: var(--surface); } .audit-status-banner strong { color: var(--ink-950); } .audit-status-banner span { color: var(--ink-650); } .audit-status-banner.is-pass { border-left-color: var(--success); background: var(--success-soft); } .audit-status-banner.is-warning { border-left-color: #c47a00; background: #fff8e5; } .audit-status-banner.is-fail { border-left-color: var(--danger); background: var(--danger-soft); } .audit-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px); align-items: start; gap: 24px; } .audit-main, .audit-sidebar { display: grid; gap: 24px; min-width: 0; } .audit-sidebar { position: sticky; top: calc(var(--header-height) + 24px); } .audit-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); } .audit-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; border-bottom: 1px solid var(--line); } .audit-panel-heading h2, .audit-sidebar h2 { margin-bottom: 0; font-size: clamp(1.35rem, 2vw, 1.75rem); } .audit-panel-heading .eyebrow { margin-bottom: 6px; } .audit-panel-heading > span, .audit-running-indicator { flex: 0 0 auto; color: var(--ink-650); font-size: 0.82rem; font-weight: 750; } .audit-running-indicator.is-running { color: var(--ru2f-green-700); } .audit-running-indicator.is-running::before { display: inline-block; width: 8px; height: 8px; margin-right: 7px; content: ""; border-radius: 50%; background: var(--ru2f-green-500); animation: audit-pulse 1.2s ease-in-out infinite; } @keyframes audit-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1); } } .audit-live-results, .audit-groups { display: grid; } .audit-placeholder { margin: 0; padding: 28px; } .audit-group { border-bottom: 1px solid var(--line); } .audit-group:last-child { border-bottom: 0; } .audit-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; color: var(--ink-950); font-weight: 780; cursor: pointer; list-style: none; } .audit-group > summary::-webkit-details-marker { display: none; } .audit-group > summary::after { flex: 0 0 auto; width: 10px; height: 10px; margin-left: 8px; content: ""; border-right: 2px solid var(--ru2f-blue-700); border-bottom: 2px solid var(--ru2f-blue-700); transform: rotate(45deg) translateY(-2px); transition: transform var(--ease); } .audit-group[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); } .audit-group-counts { display: flex; flex: 1; flex-wrap: wrap; justify-content: flex-end; gap: 8px; color: var(--ink-500); font-size: 0.76rem; font-weight: 650; } .audit-group-counts b { padding: 3px 8px; border-radius: 999px; font-weight: 760; } .audit-count-pass { color: var(--success); background: var(--success-soft); } .audit-count-warning { color: #7b5000; background: #fff3cf; } .audit-count-fail { color: var(--danger); background: var(--danger-soft); } .audit-check-list { display: grid; gap: 1px; padding: 0 26px 22px; } .audit-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); } .audit-check h3 { margin-bottom: 3px; font-size: 0.98rem; letter-spacing: -0.01em; } .audit-check p { margin-bottom: 0; font-size: 0.86rem; overflow-wrap: anywhere; } .audit-check-icon { position: relative; width: 18px; height: 18px; margin-top: 3px; border: 2px solid currentColor; border-radius: 50%; } .audit-check.is-pass .audit-check-icon, .audit-dot.is-pass { color: var(--success); } .audit-check.is-warning .audit-check-icon, .audit-dot.is-warning { color: #b06d00; } .audit-check.is-fail .audit-check-icon, .audit-dot.is-fail { color: var(--danger); } .audit-check.is-pass .audit-check-icon::after { position: absolute; top: 2px; left: 4px; width: 5px; height: 8px; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .audit-check.is-warning .audit-check-icon::after, .audit-check.is-fail .audit-check-icon::after { position: absolute; top: 2px; left: 6px; width: 2px; height: 8px; content: ""; border-radius: 2px; background: currentColor; box-shadow: 0 10px 0 -0.3px currentColor; } .audit-scope, .audit-legend { padding: 24px; } .audit-scope ul { display: grid; gap: 10px; margin: 18px 0 0; padding-left: 22px; color: var(--ink-650); } .audit-legend dl { display: grid; gap: 15px; margin: 18px 0 0; } .audit-legend dl > div { display: grid; gap: 2px; } .audit-legend dt { display: flex; align-items: center; gap: 9px; color: var(--ink-950); font-weight: 760; } .audit-legend dd { margin-left: 21px; color: var(--ink-650); font-size: 0.84rem; } .audit-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: currentColor; } .audit-iframe-stage { position: fixed; z-index: -1; top: 0; left: -12000px; width: 1500px; height: 1000px; overflow: hidden; opacity: 0; pointer-events: none; } .audit-test-frame { display: block; border: 0; background: #fff; } @media (max-width: 1080px) { .audit-layout { grid-template-columns: 1fr; } .audit-sidebar { position: static; grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .audit-toolbar { align-items: stretch; flex-direction: column; } .audit-actions { justify-content: flex-start; } .audit-summary { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .audit-section { padding-top: 44px; } .audit-actions, .audit-actions .button { width: 100%; } .audit-summary, .audit-sidebar { grid-template-columns: 1fr; } .audit-panel-heading, .audit-group > summary { align-items: flex-start; flex-direction: column; } .audit-panel-heading, .audit-group > summary, .audit-check-list { padding-inline: 18px; } .audit-group-counts { justify-content: flex-start; } } /* Empêche les tableaux légaux de forcer la largeur du document. */ .legal-content, .legal-content article, .table-wrap { min-width: 0; } .table-wrap { width: 100%; } /* ======================================================================== RU2F 1.1.0 — Thème DaisyUI personnalisé, charte historique conservée. DaisyUI est chargé depuis CDN en tant que CSS de composants uniquement. Pas de Tailwind Browser, de police externe ni de JS supplémentaire. ======================================================================== */ :root[data-theme="ru2f"] { color-scheme: light; --color-base-100: #ffffff; --color-base-200: #f4f8fb; --color-base-300: #e7f0f5; --color-base-content: #102333; --color-primary: #0b4f88; --color-primary-content: #ffffff; --color-secondary: #087a54; --color-secondary-content: #ffffff; --color-accent: #1da9c7; --color-accent-content: #062f55; --color-neutral: #062f55; --color-neutral-content: #ffffff; --color-info: #126ba2; --color-info-content: #ffffff; --color-success: #087a54; --color-success-content: #ffffff; --color-warning: #a4640a; --color-warning-content: #ffffff; --color-error: #a61b31; --color-error-content: #ffffff; --radius-selector: 0.8rem; --radius-field: 0.8rem; --radius-box: 1.5rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 0; --noise: 0; } :root { --shadow-sm: 0 12px 36px rgba(13,55,84,.075); --shadow-md: 0 28px 72px rgba(13,55,84,.125); --radius-md: 22px; --radius-lg: 30px; --container: 1240px; } /* Rétablit le comportement normal des textes existants malgré le reset CSS. */ body { overflow-wrap: break-word; } .ru-icon { display:inline-block; width:1.15em; height:1.15em; flex:none; vertical-align:-.15em; stroke:currentColor; fill:none; } .ru-card-icon { width:56px; height:56px; display:inline-grid; place-items:center; color:var(--ru2f-blue-800); background:linear-gradient(145deg,#e9f5fd,#e6f9ef); border:1px solid #d7ebee; border-radius:17px; margin-bottom:22px; } .ru-card-icon .ru-icon { width:27px; height:27px; } .ru-note-icon { width:29px; height:29px; padding:5px; border:1px solid #d7ebee; background:#eaf7f2; border-radius:10px; color:var(--ru2f-green-700); box-sizing:content-box; margin-bottom:13px; } /* Navigation : liens conservés et état actif côté PHP. */ .site-header { background:rgba(255,255,255,.87); border-bottom:1px solid rgba(220,231,238,.72); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); } .header-inner.navbar { width:min(calc(100% - 40px), var(--container)); min-height:var(--header-height); padding:0; } .site-header .brand { flex-shrink:0; } .site-header .brand img { width:46px; height:54px; } .site-header .main-nav { margin-left:auto; gap:6px; } .site-header .main-nav > a:not(.button) { position:relative; padding:11px 13px; } .site-header .main-nav > a[aria-current="page"]:not(.button)::after { content:""; position:absolute; bottom:4px; left:13px; right:13px; height:2px; border-radius:2px; background:var(--ru2f-green-600); } .site-header .main-nav a.button { gap:10px; white-space:nowrap; } .site-header .main-nav a.button .ru-icon { width:17px; height:17px; } .nav-toggle.btn { min-height:44px; height:auto; padding:10px 14px; border:1px solid var(--line); color:var(--ru2f-blue-950); background:#fff; } .nav-menu-icon { display:none; } /* Boutons DaisyUI + charte RU2F */ .button.btn { gap:10px; height:auto; min-height:50px; padding:13px 21px; letter-spacing:-.015em; } .button.btn .ru-icon { width:19px; height:19px; } .button.btn:hover .ru-icon { transform:translate(2px,-1px); } .button.btn .ru-icon { transition:transform var(--ease); } .button.btn:focus-visible { outline:3px solid rgba(29,169,199,.52); outline-offset:3px; } .button-small.btn { min-height:42px; padding:10px 15px; } .button-light.btn { background:#fff; color:var(--ru2f-blue-950); border-color:#fff; } /* Accueil : typographie et cockpit de démonstration statique. */ .hero { min-height:unset; background:radial-gradient(circle at 82% 13%,rgba(29,169,199,.12),transparent 35%),linear-gradient(110deg,#f7fbfd,#f1f8fb 68%,#f8fcfa); } .hero-grid { min-height:690px; gap:clamp(34px,4vw,64px); grid-template-columns:minmax(0, .94fr) minmax(0,1.06fr); padding-block:90px 110px; } .hero-copy { min-width:0; } .hero-copy h1 { font-size:clamp(2.65rem,4.35vw,4.9rem); line-height:1.08; letter-spacing:-.055em; max-width:665px; } .hero-copy .hero-lead { font-size:clamp(1.08rem,1.45vw,1.25rem); } .hero-eyebrow { text-transform:none; letter-spacing:0; margin-bottom:23px; } .ru-badge-accent.badge { display:inline-flex; gap:9px; height:auto; min-height:33px; padding:7px 13px; color:var(--ru2f-blue-900); background:rgba(235,248,250,.9); border:1px solid rgba(29,169,199,.25); font-size:.76rem; font-weight:750; letter-spacing:.025em; } .ru-badge-accent .ru-icon { color:var(--ru2f-green-700); width:16px; height:16px; } .hero-actions { gap:13px; } .trust-list { gap:13px 22px; margin-top:29px; } /* Faux cockpit explicite : aucun chiffre n'est présenté comme une vraie donnée client. */ .hero-visual.dashboard-preview { position:relative; isolation:isolate; min-height:520px; width:100%; max-width:680px; margin-inline:auto; display:flex; align-items:center; } .hero-visual.dashboard-preview::before { display:none; } .preview-halo { position:absolute; z-index:-1; inset:2% -2% 0 0; border-radius:48%; background:radial-gradient(ellipse,rgba(29,169,199,.20),rgba(34,189,122,.08) 48%,transparent 72%); filter:blur(30px); } .ru-dashboard.mockup-window { position:relative; display:block; width:100%; overflow:hidden; margin:0; padding:0; border:1px solid #c8dce8; border-radius:23px; background:#fff; box-shadow:0 34px 80px rgba(6,47,85,.20), 0 3px 15px rgba(6,47,85,.08); transform:perspective(1400px) rotateY(-2.5deg) rotateX(1.3deg); } .ru-dashboard.mockup-window::before { content:none; } .dashboard-topbar { display:flex; align-items:center; gap:11px; min-height:64px; padding:11px 20px; border-bottom:1px solid #e3edf3; background:#fff; } .dashboard-app-id { min-width:0; display:flex; align-items:center; gap:9px; margin-right:auto; white-space:nowrap; font-size:.83rem; } .dashboard-app-id strong { color:var(--ru2f-blue-950); } .dashboard-app-id strong span { font-weight:550; color:#6e8190; } .dashboard-brand { display:grid; place-items:center; width:30px; height:30px; background:linear-gradient(135deg,var(--ru2f-blue-900),var(--ru2f-green-700)); border-radius:9px; color:#fff; } .dashboard-brand .ru-icon { width:16px; height:16px; } .dashboard-demo.badge { height:24px; padding:2px 9px; color:#557186; background:#f0f6f9; border:1px solid #e1edf2; font-size:.63rem; } .dashboard-avatar { display:grid; place-items:center; width:30px; height:30px; color:var(--ru2f-blue-900); border:2px solid #e0efee; border-radius:50%; background:#e6f8ee; font-weight:850; font-size:.8rem; } .dashboard-body { display:grid; grid-template-columns:60px minmax(0,1fr); min-height:400px; background:#f6f9fc; } .dashboard-sidebar { display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:20px; border-right:1px solid #e3edf3; background:#fff; } .dashboard-sidebar > span { display:grid; place-items:center; width:35px; height:35px; color:#9aafbd; border-radius:10px; } .dashboard-sidebar .dashboard-side-active { color:var(--ru2f-blue-800); background:#e9f4fa; } .dashboard-sidebar .ru-icon { width:17px; height:17px; } .dashboard-main { padding:25px 22px; min-width:0; } .dashboard-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; } .dashboard-overline { display:block; margin-bottom:3px; text-transform:uppercase; color:#8196a5; font-size:.57rem; font-weight:820; letter-spacing:.13em; } .dashboard-heading h2 { font-size:1.18rem; line-height:1.2; margin:0; letter-spacing:-.025em; } .dashboard-live.badge { display:inline-flex; gap:6px; min-height:25px; padding:4px 9px; font-size:.66rem; font-weight:750; white-space:nowrap; border-color:#c4e8d5; background:#effbf4; color:var(--ru2f-green-700); } .dashboard-live-dot { width:6px; height:6px; border-radius:100%; background:var(--ru2f-green-600); } .dashboard-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:15px; } .dashboard-kpi.stat { display:flex; flex-direction:column; gap:5px; min-width:0; padding:14px 13px; background:#fff; border:1px solid #e3edf3; border-radius:12px; box-shadow:0 2px 9px rgba(13,55,84,.025); } .dashboard-kpi .stat-title { min-height:28px; color:#667e8f; font-size:.66rem; line-height:1.3; font-weight:650; white-space:normal; } .dashboard-kpi .stat-value { color:var(--ru2f-blue-950); font-size:clamp(1.3rem,2vw,1.8rem); line-height:1.15; letter-spacing:-.04em; } .dashboard-kpi small { color:var(--ru2f-green-700); font-weight:650; font-size:.58rem; line-height:1.2; } .dashboard-lower { display:grid; grid-template-columns:1.1fr .9fr; gap:12px; } .dashboard-panel.card { min-width:0; padding:15px; border:1px solid #e3edf3; border-radius:12px; background:#fff; box-shadow:0 2px 9px rgba(13,55,84,.02); } .dashboard-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; } .dashboard-panel-head strong { font-size:.76rem; color:var(--ru2f-blue-950); } .dashboard-panel-head .ru-icon { color:var(--ru2f-green-700); } .dashboard-panel-head .badge { height:21px; padding:0 7px; font-size:.57rem; color:#7290a3; } .dashboard-bars { display:grid; align-items:end; height:120px; grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px; border-bottom:1px solid #e5ecf1; background:repeating-linear-gradient(to top,transparent 0,transparent 28px,rgba(222,234,240,.55) 29px); } .dashboard-bars span { display:block; height:65%; min-width:0; border-radius:5px 5px 0 0; background:linear-gradient(0deg,var(--ru2f-blue-700),var(--ru2f-cyan-500)); } .dashboard-bars span:nth-child(1) { height:48%; } .dashboard-bars span:nth-child(2) { height:66%; } .dashboard-bars span:nth-child(3) { height:53%; } .dashboard-bars span:nth-child(4) { height:88%; } .dashboard-bars span:nth-child(5) { height:72%; } .dashboard-bars span:nth-child(6) { height:100%; } .dashboard-bars span:nth-child(7) { height:79%; } .dashboard-bars span:nth-child(4), .dashboard-bars span:nth-child(6) { background:linear-gradient(0deg,var(--ru2f-green-700),var(--ru2f-green-500)); } .dashboard-axis { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; color:#9aaeba; font-size:.55rem; padding-top:5px; } .dashboard-tasks { display:flex; flex-direction:column; } .dashboard-task { display:flex; gap:8px; align-items:center; padding:9px 0; border-top:1px solid #f0f4f6; min-width:0; } .dashboard-task > span:last-child { font-size:.66rem; font-weight:700; color:#263e50; line-height:1.25; } .dashboard-task small { display:block; padding-top:2px; color:#879baa; font-size:.57rem; font-weight:500; } .dashboard-check, .dashboard-task-clock { width:23px; height:23px; display:grid; flex:none; place-items:center; border-radius:7px; background:#e8f9ef; color:var(--ru2f-green-700); } .dashboard-task-clock { background:#edf6fa; color:var(--ru2f-blue-700); } .dashboard-task .ru-icon { width:13px; height:13px; } .dashboard-floating.badge { position:absolute; bottom:0; right:-11px; z-index:2; display:flex; gap:8px; height:auto; padding:12px 17px; color:var(--ru2f-blue-950); background:#fff; border:1px solid #d6e8ec; border-radius:12px; box-shadow:0 12px 30px rgba(6,47,85,.12); font-size:.77rem; font-weight:750; } .dashboard-floating .ru-icon { color:var(--ru2f-green-700); width:18px; height:18px; } /* Cartes et modules */ .ru-feature-card.card, .sector-card.card, .ru-value-card.card { display:block; } .ru-feature-card.card { border-color:#dde9f0; box-shadow:0 10px 30px rgba(13,55,84,.055); } .ru-feature-card.card h2,.ru-feature-card.card h3 { color:var(--ru2f-blue-950); } .ru-feature-card.card:hover .ru-card-icon, .sector-card.card:hover .ru-card-icon { color:var(--ru2f-green-700); background:linear-gradient(145deg,#eaf9ef,#eef8fc); } .solution-list { gap:13px; border:0; } .solution-list a { position:relative; gap:8px; padding:22px 24px; border:1px solid #dbe8f0; border-radius:16px; background:#fff; box-shadow:0 7px 20px rgba(13,55,84,.035); } .solution-list a:hover { padding-left:31px; border-color:#a8d5d3; } .ru-solution-name { display:flex; align-items:center; gap:12px; } .ru-solution-name .ru-icon { width:22px; height:22px; color:var(--ru2f-green-700); } .solution-list small { padding-left:34px; } .ru-timeline.steps-list > li { position:relative; } .ru-timeline.steps-list > li:not(:last-child)::before { content:""; position:absolute; top:80px; bottom:-12px; left:24px; border-left:1px dashed rgba(11,79,136,.32); } /* Diversifie les en-têtes des pages intérieures sans réécrire le moteur. */ .page-hero { background:radial-gradient(circle at 92% 22%,rgba(29,169,199,.09),transparent 40%),linear-gradient(100deg,#f7fbfd,#eef8fb); } .page-hero-grid { min-height:400px; gap:clamp(35px,6vw,88px); grid-template-columns:minmax(0,1.1fr) minmax(270px,.52fr); } .page-hero h1 { font-size:clamp(2.55rem,4.65vw,4.45rem); } .ru-note-glass.card { display:block; border:1px solid rgba(197,214,224,.9); background:rgba(255,255,255,.86); box-shadow:0 16px 40px rgba(13,55,84,.08); } .ru-hero-solutions { background:radial-gradient(circle at 81% 30%,rgba(34,189,122,.13),transparent 39%),linear-gradient(112deg,#f8fbfd,#ecf7f9); } .ru-hero-features { background:radial-gradient(circle at 90% 15%,rgba(29,169,199,.16),transparent 38%),linear-gradient(110deg,#f8fcfd,#f0f7fc); } .ru-hero-sectors { background:radial-gradient(circle at 80% 20%,rgba(11,79,136,.11),transparent 38%),linear-gradient(110deg,#f9fcfd,#eef7fa); } .ru-hero-about { background:radial-gradient(circle at 82% 20%,rgba(34,189,122,.14),transparent 35%),linear-gradient(110deg,#f7fbfd,#f2faf6); } .ru-hero-contact { background:linear-gradient(110deg,#f7fbfd,#edf8f5); } .ru-solution-sections { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } .ru-solution-sections .solution-detail { min-width:0; display:block; padding:30px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 9px 29px rgba(13,55,84,.045); scroll-margin-top:120px; } .ru-solution-sections .solution-detail:first-child { grid-column:1 / -1; display:grid; grid-template-columns:130px minmax(0,1fr); gap:30px; padding:42px; background:linear-gradient(125deg,#f7fbfd,#eef8f7); } .ru-solution-sections .solution-detail:last-child { padding:30px; border:1px solid var(--line); } .ru-solution-sections .solution-detail .solution-number { display:flex; align-items:center; justify-content:space-between; margin-bottom:17px; font-size:3.7rem; } .ru-solution-sections .solution-detail:first-child .solution-number { flex-direction:column; align-items:start; justify-content:start; gap:30px; font-size:5.4rem; } .ru-solution-sections .solution-number .ru-icon { width:40px; height:40px; color:var(--ru2f-green-700); stroke:currentColor; -webkit-text-stroke:0; } .ru-solution-sections .check-list { gap:8px; } .sector-card-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; } .sector-card-top .ru-card-icon { margin:0; } .sector-card-top .badge { padding:6px 13px; height:auto; color:var(--ru2f-green-700); border-color:#c8e2dc; background:#f2faf6; font-size:.75rem; } .sector-card.card { box-shadow:0 12px 32px rgba(13,55,84,.055); } .sector-card.card h2 { font-size:clamp(1.5rem,2.3vw,1.95rem); color:var(--ru2f-blue-950); } .ru-value-card.card { background:#fff; border:1px solid var(--line); box-shadow:0 10px 30px rgba(13,55,84,.045); } .ru-value-card.card > .ru-card-icon { display:inline-grid; margin:0 0 25px; width:56px; height:56px; background:#e8f4fa; } /* Formulaire - styles DaisyUI harmonisés avec les validations PHP existantes */ .ru-contact-card.card { display:block; border:1px solid #d8e6ee; box-shadow:0 24px 60px rgba(13,55,84,.095); } .form-field .input, .form-field .select, .form-field .textarea { width:100%; max-width:none; height:auto; min-height:52px; outline:none; color:var(--ink-950); background:#fff; border:1px solid #c6d8e1; border-radius:12px; box-shadow:none; padding:12px 15px; } .form-field .textarea { min-height:174px; } .form-field :is(.input,.select,.textarea):focus-visible { outline:3px solid rgba(29,169,199,.22); outline-offset:0; border-color:var(--ru2f-cyan-500); } .form-field :is(.input,.select,.textarea)[aria-invalid="true"] { border-color:var(--danger); background:#fffafb; } .form-field label { font-weight:750; } .contact-facts strong { display:flex; align-items:center; gap:9px; } .contact-facts strong .ru-icon { color:var(--ru2f-green-700); width:18px; height:18px; } .consent-field .checkbox { width:19px; height:19px; margin-top:4px; border-color:var(--ru2f-green-700); } .form-card .alert { display:grid; gap:5px; align-items:start; padding:16px 19px; border-radius:12px; margin-bottom:20px; font-size:.9rem; } .form-card .alert-error { background:#fff0f3; color:var(--danger); } .form-card .alert-success { background:#e8f8f0; color:var(--success); } /* Cibles tactiles, largeur, et adaptations mobiles du cockpit */ @media (max-width:1150px) { .hero-grid { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:24px; } .dashboard-main { padding:20px 15px; } .dashboard-lower { grid-template-columns:1fr .86fr; } .dashboard-bars { gap:6px; } } @media (max-width:900px) { .header-inner.navbar { width:min(calc(100% - 32px), var(--container)); } .site-header .main-nav { margin-left:0; gap:0; } .site-header .main-nav > a[aria-current="page"]:not(.button)::after { display:none; } .nav-menu-icon { display:inline-block; width:20px; height:20px; } .nav-toggle-bars { display:none; } .hero-grid { min-height:unset; grid-template-columns:1fr; padding-block:75px 90px; gap:42px; } .hero-copy { max-width:770px; } .hero-copy h1 { font-size:clamp(2.7rem,7.2vw,4.6rem); } .hero-visual.dashboard-preview { min-height:unset; max-width:680px; } .ru-dashboard.mockup-window { transform:none; } .dashboard-floating.badge { right:-6px; bottom:-17px; } .ru-solution-sections { grid-template-columns:1fr 1fr; } .page-hero-grid { grid-template-columns:1fr; } .page-hero-note { max-width:640px; } } @media (max-width:680px) { .container, .header-inner.navbar { width:min(calc(100% - 28px),var(--container)); } .hero { background:linear-gradient(125deg,#f8fcfd,#f0f9fa); } .hero-grid { padding-block:57px 83px; } .hero-copy h1 { font-size:clamp(2.45rem,10.8vw,3.8rem); } .hero-copy .hero-lead { font-size:1.05rem; } .hero-actions .button.btn { width:100%; } .hero-visual.dashboard-preview { width:100%; } .dashboard-topbar { padding:10px 12px; min-height:56px; } .dashboard-body { grid-template-columns:42px minmax(0,1fr); min-height:320px; } .dashboard-sidebar { gap:12px; } .dashboard-sidebar > span { width:30px; height:30px; } .dashboard-main { padding:18px 12px; } .dashboard-heading { margin-bottom:15px; } .dashboard-heading h2 { font-size:1rem; } .dashboard-kpis { gap:7px; } .dashboard-kpi.stat { padding:10px 8px; } .dashboard-kpi .stat-title { font-size:.6rem; min-height:32px; } .dashboard-kpi .stat-value { font-size:1.38rem; } .dashboard-kpi small { font-size:.54rem; } .dashboard-lower { grid-template-columns:1fr; } .dashboard-panel.card { padding:12px; } .dashboard-bars { height:105px; } .dashboard-tasks { display:none; } .dashboard-floating.badge { bottom:-25px; right:5px; font-size:.69rem; padding:10px 12px; } .ru-solution-sections { grid-template-columns:1fr; gap:16px; } .ru-solution-sections .solution-detail:first-child { grid-column:auto; display:block; padding:28px; } .ru-solution-sections .solution-detail:first-child .solution-number { flex-direction:row; justify-content:space-between; align-items:center; font-size:3.7rem; gap:8px; } .ru-solution-sections .solution-detail { padding:25px; } .ru-solution-sections .solution-detail:last-child { padding:25px; } .page-hero-grid { min-height:unset; } .ru-timeline.steps-list > li:not(:last-child)::before { left:21px; } } @media (max-width:440px) { .container, .header-inner.navbar { width:min(calc(100% - 24px),var(--container)); } .ru-dashboard.mockup-window { border-radius:16px; } .dashboard-topbar { gap:7px; } .dashboard-app-id strong { font-size:.75rem; } .dashboard-app-id strong span { display:none; } .dashboard-demo.badge { font-size:.58rem; } .dashboard-body { grid-template-columns:36px minmax(0,1fr); } .dashboard-sidebar { padding-top:12px; } .dashboard-sidebar > span { width:28px; height:28px; } .dashboard-sidebar .ru-icon { width:15px; height:15px; } .dashboard-heading .dashboard-live { font-size:.54rem; padding:4px 6px; } .dashboard-kpi .stat-value { font-size:1.14rem; } .dashboard-kpi small { display:none; } .dashboard-kpi .stat-title { font-size:.58rem; } .dashboard-kpis { margin-bottom:10px; } .dashboard-floating.badge { right:3px; } .ru-note-glass.card { padding:22px; } } @media (prefers-reduced-motion:reduce) { .ru-dashboard.mockup-window { transform:none; } } /* Préférences de mesure d'audience : même accès au refus et à l'acceptation. */ [hidden] { display: none !important; } .footer-preferences { appearance:none; border:0; background:none; padding:0; margin:0; color:inherit; font:inherit; text-align:left; cursor:pointer; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.2em; } .footer-preferences:hover, .footer-preferences:focus-visible { text-decoration-color:currentColor; color:#fff; } .cookie-banner { position:fixed; z-index:900; inset:auto max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); width:min(calc(100% - 24px), 1040px); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 24px; border:1px solid #bfd9e3; border-radius:18px; background:#fff; box-shadow:0 15px 65px rgba(6,47,85,.25); } .cookie-banner-copy { min-width:0; flex:1; } .cookie-banner-copy strong { display:block; color:var(--ru2f-blue-950); margin-bottom:4px; font-size:1.1rem; } .cookie-banner-copy p { font-size:.88rem; margin:0; } .cookie-banner-actions, .cookie-settings-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .cookie-banner-actions .button, .cookie-settings-actions .button { min-width:128px; text-align:center; } .cookie-settings { display:grid; gap:12px; padding:20px; margin:20px 0; border:1px solid var(--line); border-radius:16px; background:var(--surface-soft); } .cookie-settings p { margin:0; } @media (max-width:680px) { .cookie-banner { flex-direction:column; align-items:stretch; gap:14px; padding:17px; max-height:min(70vh,540px); overflow:auto; } .cookie-banner-actions, .cookie-settings-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .cookie-banner-actions .button, .cookie-settings-actions .button { min-width:0; width:100%; padding-inline:8px; font-size:.85rem; } } @media (max-width:359px) { .cookie-banner-actions, .cookie-settings-actions { grid-template-columns:1fr; } .dashboard-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; } .dashboard-kpi.stat { padding:8px 5px; } .dashboard-kpi .stat-value { font-size:1rem; } .dashboard-main { padding:13px 8px; } .dashboard-live.badge { display:none; } } /* RU2F 1.2.0 — typographie, bento et démonstration logicielle : sans changement de charte. */ :root { --premium-ink: #062f55; --premium-ring: rgba(29, 169, 199, .26); } body { font-family: 'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif; } h1, h2, h3, .brand-copy strong, .dashboard-kpi .stat-value { font-family: 'Manrope Variable', 'Inter Variable', Inter, system-ui, sans-serif; } h1, h2 { font-weight: 800; letter-spacing: -.045em; } h3 { font-weight: 760; } .hero-copy h1 { letter-spacing: -.055em; } .button.btn, .premium-demo-tab { transition: transform .2s ease, box-shadow .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease; } @media (hover:hover) { .button.btn:hover { transform:translateY(-2px); box-shadow:0 14px 25px rgba(6,47,85,.12); } } .ti { display:inline-flex; align-items:center; justify-content:center; font-size:1.15em; line-height:1; vertical-align:-.07em; } .ru-card-icon [data-lucide], .ru-card-icon svg.lucide, .bento-connect svg.lucide { width:24px; height:24px; display:block; } /* Chart.js remplace seulement le graphe illustratif, qui reste lisible hors CDN. */ .dashboard-chart-wrap { position:relative; height:145px; width:100%; } .dashboard-chart-wrap .dashboard-canvas { display:none; width:100% !important; height:100% !important; } .dashboard-chart-wrap.chart-ready .dashboard-canvas { display:block; } .dashboard-chart-wrap.chart-ready .dashboard-bars, .dashboard-chart-wrap.chart-ready .dashboard-axis { display:none; } .dashboard-chart-panel .dashboard-bars { height:120px; } .dashboard-chart-panel .dashboard-axis { padding-top:6px; } /* Bento : quatre cartes pour une composition plus équilibrée et un aperçu réel de logiciel. */ .home-bento { align-items:stretch; } .home-bento > .feature-card { min-width:0; } .home-bento .bento-lead { grid-column:span 2; background:linear-gradient(145deg,#fff 12%,#f3f9fd 100%); } .home-bento .bento-connect { grid-column:span 2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:28px; background:linear-gradient(118deg,#f7fbfd 0%,#f0faf7 100%); } .bento-records { overflow:hidden; max-width:550px; margin-top:22px; border:1px solid #e0eaf1; border-radius:16px; background:#fff; box-shadow:0 12px 24px rgba(6,47,85,.06); } .bento-records > div { display:flex; align-items:center; gap:12px; padding:11px 17px; color:#2b4556; font-size:.84rem; font-weight:650; } .bento-records > div + div { border-top:1px solid #edf2f6; } .bento-records .bento-records-head { justify-content:space-between; gap:12px; background:#f7fafc; color:var(--ru2f-blue-950); font-size:.8rem; font-weight:800; } .bento-records .bento-records-head .badge { font-size:.67rem; } .bento-record-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#edf7fc; color:var(--ru2f-blue-800); flex:none; } .bento-records .bento-status { margin-left:auto; flex:none; font-size:.65rem; font-weight:750; padding:4px 8px; color:#206b91; background:#e9f5fb; border-radius:40px; } .bento-records .bento-status-done { color:#087a54; background:#e4f7ec; } .bento-connections { display:flex; flex-direction:column; align-items:center; gap:3px; padding:16px; border-radius:18px; background:rgba(255,255,255,.85); border:1px solid rgba(196,220,230,.65); } .bento-connections > span:not(.bento-link-line) { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 10px; border:1px solid #dceaf0; border-radius:12px; background:#fff; color:var(--ru2f-blue-900); font-size:.82rem; font-weight:750; white-space:nowrap; } .bento-connections > span:not(.bento-link-line) .ti { font-size:1.25rem; color:var(--ru2f-green-700); } .bento-connections .bento-link-line { height:15px; border-left:2px dashed #8bc8ca; } /* Démonstrateur accessible : panneaux à onglets, toutes données fictives. */ .premium-demo-section { position:relative; overflow:hidden; background:linear-gradient(115deg,#073e70 0%,#062f55 68%,#0a4b6c 100%); } .premium-demo-section::before { content:""; pointer-events:none; position:absolute; width:470px; height:470px; right:-140px; top:-170px; border-radius:50%; background:radial-gradient(circle,rgba(29,169,199,.21),transparent 65%); } .premium-demo-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(36px,5vw,80px); align-items:center; } .premium-demo-intro { position:relative; z-index:1; } .premium-demo-section .eyebrow { color:#65dec0; } .premium-demo-intro > h2 { color:#fff; font-size:clamp(2rem,3.55vw,3.3rem); } .premium-demo-intro > p:not(.eyebrow) { color:#c8dbe7; font-size:1.02rem; max-width:460px; } .premium-demo-intro > a { display:inline-flex; align-items:center; gap:9px; color:#d8fff0; margin-top:22px; font-weight:730; } .premium-demo-intro > a .ru-icon { height:18px; width:18px; } .premium-demo-tabs { display:grid; gap:9px; max-width:410px; margin-top:28px; } .premium-demo-tab { width:100%; min-height:52px; padding:11px 15px; display:flex; align-items:center; gap:11px; text-align:left; border:1px solid rgba(215,240,249,.23); border-radius:13px; background:rgba(255,255,255,.055); color:#e8f4fc; font-size:.96rem; font-weight:750; cursor:pointer; } .premium-demo-tab .ti { font-size:1.25rem; color:#78d6d5; } .premium-demo-tab:hover, .premium-demo-tab.is-selected { color:var(--ru2f-blue-950); background:#fff; border-color:#fff; box-shadow:0 8px 26px rgba(2,28,52,.15); } .premium-demo-tab.is-selected .ti, .premium-demo-tab:hover .ti { color:var(--ru2f-green-700); } .premium-demo-tab:focus-visible { outline:3px solid #8be9ce; outline-offset:3px; } .premium-demo-window.mockup-window { position:relative; min-width:0; width:100%; padding:0; overflow:hidden; border:1px solid #d6e4eb; border-radius:22px; background:#fff; box-shadow:0 32px 90px rgba(2,28,52,.28); } .premium-demo-window.mockup-window::before { content:none; } .premium-demo-topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:55px; padding:11px 20px; background:#f7fafc; border-bottom:1px solid #e4edf2; color:#678294; font-size:.75rem; } .premium-demo-topbar strong { font-size:.73rem; font-weight:740; color:var(--ru2f-blue-950); } .premium-demo-topbar .badge { height:auto; min-height:25px; padding:3px 8px; white-space:nowrap; font-size:.62rem; } .premium-demo-dots { display:flex; gap:5px; flex:none; } .premium-demo-dots i { width:8px; height:8px; background:#bdd0db; border-radius:50%; } .premium-demo-dots i:first-child { background:#d8949a; } .premium-demo-dots i:nth-child(2) { background:#e7c77e; } .premium-demo-dots i:nth-child(3) { background:#88cbb0; } .premium-demo-panel { padding:28px; min-height:325px; outline-offset:-2px; } .premium-demo-panel[hidden] { display:none !important; } .premium-demo-panel-title { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:20px; border-bottom:1px solid #e8f0f5; } .premium-demo-panel-title small { display:block; margin-bottom:5px; text-transform:uppercase; color:#708da0; font-size:.66rem; font-weight:800; letter-spacing:.09em; } .premium-demo-panel-title h3 { margin:0; font-size:1.27rem; } .premium-demo-panel-title .badge { font-size:.7rem; flex:none; } .premium-demo-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #edf2f5; } .premium-demo-row > span:nth-child(2) { min-width:0; flex:1; } .premium-demo-row strong, .premium-task-line strong { display:block; color:var(--ru2f-blue-950); font-size:.86rem; font-weight:800; } .premium-demo-row small, .premium-task-line small { display:block; color:#7a91a0; font-size:.72rem; } .premium-demo-avatar { display:grid; place-items:center; width:35px; height:35px; border-radius:11px; background:#e7f2fa; color:var(--ru2f-blue-800); font-weight:850; font-size:.86rem; flex:none; } .premium-demo-avatar.is-green { color:var(--ru2f-green-700); background:#e6f8ef; } .premium-demo-chip { display:inline-flex; white-space:nowrap; flex:none; padding:5px 10px; border-radius:25px; background:#e9f5fa; color:var(--ru2f-blue-800); font-size:.66rem; font-weight:750; } .premium-demo-chip.is-green { color:var(--ru2f-green-700); background:#e6f8ef; } .premium-demo-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:18px; color:#7d95a4; font-size:.69rem; } .premium-demo-foot .lucide, .premium-demo-foot .ti { color:var(--ru2f-green-700); height:18px; width:18px; } .premium-task-line { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid #edf2f5; } .premium-task-line > div { min-width:0; flex:1; } .premium-task-marker { display:grid; place-items:center; width:30px; height:30px; flex:none; border:2px solid #bed8e6; border-radius:10px; background:#f1f7fa; } .premium-task-marker.done { color:var(--ru2f-green-700); border-color:#c2ebd3; background:#e7f8ed; } .premium-meters { display:grid; gap:23px; margin-block:26px 12px; } .premium-meters > div > span { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:9px; color:var(--ru2f-blue-950); font-size:.85rem; } .premium-meters b { color:var(--ru2f-green-700); } .premium-meter { height:11px; border-radius:50px; background:#e9f2f6; overflow:hidden; } .premium-meter i { display:block; height:100%; border-radius:50px; background:linear-gradient(90deg,#126ba2,#1da9c7,#22bd7a); } @media (max-width:1000px) { .premium-demo-grid { gap:32px; } .premium-demo-topbar { padding:10px 13px; } .premium-demo-panel { padding:21px; } } @media (max-width:800px) { .premium-demo-grid { grid-template-columns:1fr; } .premium-demo-intro > p:not(.eyebrow) { max-width:650px; } .premium-demo-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none; gap:7px; } .premium-demo-tab { justify-content:center; padding:12px 7px; font-size:.81rem; } } @media (max-width:650px) { .home-bento .bento-lead, .home-bento .bento-connect { grid-column:auto; } .home-bento .bento-connect { display:block; } .bento-connections { margin-top:20px; } .premium-demo-tabs { grid-template-columns:1fr; } .premium-demo-tab { justify-content:flex-start; padding:11px 14px; } .premium-demo-topbar .badge { display:none; } .premium-demo-panel-title h3 { font-size:1.08rem; } .premium-demo-panel { padding:16px; min-height:340px; } .premium-demo-chip { padding:5px 7px; font-size:.62rem; } } @media (max-width:390px) { .bento-records > div { padding:9px; gap:7px; font-size:.76rem; } .bento-records .bento-status { font-size:.59rem; padding:4px 6px; } .premium-demo-row, .premium-task-line { gap:7px; } .premium-demo-panel-title .badge { display:none; } .premium-demo-topbar strong { font-size:.65rem; } } @media (prefers-reduced-motion: reduce) { .premium-demo-tab, .button.btn { transition:none !important; transform:none !important; } } /* v1.3.0 — Parcours client, exemples, démonstrations et cadrage du projet. */ .ru-hero-portfolio, .ru-hero-demos, .ru-hero-brief { background: radial-gradient(ellipse at 85% 20%,rgba(29,169,199,.12),transparent 46%),linear-gradient(130deg,#f6fafd,#eef7fa 75%,#f8fcfa); } .ru-hero-demos .page-hero-note, .ru-hero-brief .page-hero-note, .ru-hero-portfolio .page-hero-note { align-self:center; } .portfolio-grid { display:grid; gap:36px; } .portfolio-case { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:0; border:1px solid var(--line); border-radius:26px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); } .portfolio-case:nth-child(even) .portfolio-visual { order:2; } .portfolio-copy { padding:clamp(28px,4.3vw,60px); align-self:center; } .portfolio-copy h3 { font-size:clamp(1.7rem,2.4vw,2.45rem); } .portfolio-copy p { max-width:530px; } .portfolio-copy .check-list { margin-top:22px; } .portfolio-copy .text-link { margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-weight:760; } .portfolio-visual { display:flex; flex-direction:column; justify-content:center; gap:30px; padding:clamp(23px,4vw,55px); min-width:0; background:linear-gradient(145deg,#e1f2fa,#f5fafc); } .portfolio-visual-crm { background:linear-gradient(145deg,#e5f5fb,#f4f8fb); } .portfolio-visual-ops { background:linear-gradient(135deg,#e4f6ef,#eef9fb); } .portfolio-visual-stats { background:linear-gradient(145deg,#e7f2fc,#e8f9f4); } .portfolio-ui-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.89rem; font-weight:780; color:var(--ru2f-blue-950); } .portfolio-ui-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .portfolio-ui-kpis div { background:rgba(255,255,255,.91); padding:18px 12px; border:1px solid #dbe9f0; border-radius:15px; box-shadow:0 10px 24px #10456910; } .portfolio-ui-kpis small { display:block; font-size:.75rem; color:#536c79; } .portfolio-ui-kpis strong { display:block; margin-top:5px; font-size:clamp(1.35rem,2.8vw,2.1rem); color:var(--ru2f-blue-950); } .portfolio-ui-lines { display:grid; gap:9px; } .portfolio-ui-lines > span { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid #dceaf2; border-radius:13px; padding:12px; font-size:.85rem; color:#193c53; } .portfolio-ui-lines b { margin-left:auto; white-space:nowrap; color:var(--ru2f-green-700); font-size:.71rem; } .portfolio-dot { width:9px; height:9px; flex:none; border-radius:50%; background:var(--ru2f-cyan-500); } .portfolio-dot.is-green { background:var(--ru2f-green-600); } .portfolio-schedule { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:18px; border-radius:18px; border:1px solid #d8e9ed; background:#fff; } .portfolio-schedule > span { text-align:center; font-size:.7rem; color:#617987; } .portfolio-schedule > i { display:flex; align-items:center; justify-content:center; border-radius:11px; padding:13px 6px; font-size:.7rem; font-style:normal; font-weight:780; min-height:58px; text-align:center; } .portfolio-schedule > i.is-blue { grid-column:1/4; background:#dceefa; color:#0b4f88; } .portfolio-schedule > i.is-green { grid-column:4/6; background:#def6e9; color:#087a54; } .portfolio-schedule > i.is-cyan { grid-column:2/5; background:#dff5f9; color:#126ba2; } .portfolio-schedule-bottom { font-size:.8rem; color:var(--ru2f-blue-900); font-weight:700; } .portfolio-bars { height:180px; display:flex; align-items:end; gap:15px; padding:14px 16px 0; border-bottom:2px solid #bfd8e4; } .portfolio-bars i { display:block; flex:1; min-height:8px; border-radius:9px 9px 0 0; background:linear-gradient(0deg,#0b4f88,#1da9c7); } .portfolio-visual-stats .portfolio-ui-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .portfolio-close { display:flex; align-items:center; justify-content:space-between; gap:36px; } .portfolio-close > div { max-width:740px; } .portfolio-close .button { flex:none; } .demo-intro-note { display:flex; align-items:center; gap:9px; margin-top:18px; font-weight:660; font-size:.93rem; } .demo-intro-note .ru-icon { flex:none; width:20px; height:20px; color:var(--ru2f-green-700); } .demo-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:35px; } .demo-heading > div { max-width:700px; } .demo-heading > p { max-width:380px; } .demo-workbench { display:grid; grid-template-columns:280px minmax(0,1fr); align-items:stretch; gap:20px; } .demo-switcher { display:flex; flex-direction:column; gap:12px; } .demo-switch { display:flex; text-align:left; align-items:center; gap:13px; width:100%; min-height:92px; padding:19px; background:#fff; border:1px solid var(--line); border-radius:17px; cursor:pointer; transition:border-color .2s,background-color .2s,box-shadow .2s; } .demo-switch.is-active,.demo-switch:hover { border-color:#5bb9c8; background:#effaf9; box-shadow:0 12px 26px #0b4f8810; } .demo-switch .ru-icon { width:26px; height:26px; color:var(--ru2f-blue-800); flex:none; } .demo-switch strong { color:var(--ru2f-blue-950); display:block; } .demo-switch small { display:block; font-size:.75rem; color:var(--ink-650); margin-top:3px; } .demo-switch-cta { background:#083c69; color:#fff; padding:23px; border-radius:17px; font-size:.89rem; text-decoration:none; } .demo-switch-cta:hover { color:#fff; background:var(--ru2f-blue-950); } .demo-switch-cta strong { display:inline-flex; align-items:center; gap:6px; margin-top:10px; } .demo-switch-cta .ru-icon { width:17px; height:17px; } .demo-stage.mockup-window { padding:0; border:1px solid var(--line); background:#fff; border-radius:22px; overflow:hidden; min-width:0; box-shadow:var(--shadow-md); } .demo-stage.mockup-window::before { display:none; } .demo-window-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 22px; background:#f5f9fc; border-bottom:1px solid var(--line); min-height:60px; } .demo-window-bar strong { color:var(--ru2f-blue-950); font-size:.84rem; } .demo-content { padding:clamp(18px,3.2vw,36px); } .demo-content[hidden],.brief-step[hidden],.brief-navigation button[hidden],.demo-chart-fallback[hidden],.demo-chart-box canvas[hidden] { display:none !important; } .demo-panel-header { display:flex; align-items:start; justify-content:space-between; gap:18px; margin-bottom:26px; } .demo-panel-header h3 { font-size:clamp(1.36rem,2.5vw,2rem); } .demo-panel-header p { max-width:480px; margin:0; } .demo-counter { background:#e7f8ef; color:#087a54; border:none; white-space:nowrap; } .demo-add-form { display:grid; gap:9px; margin-bottom:24px; } .demo-add-form label { font-size:.86rem; font-weight:740; color:var(--ink-950); } .demo-add-form > div { display:flex; gap:9px; } .demo-add-form .input { min-width:0; flex:1; } .demo-add-form .button { flex:none; } .demo-records { display:grid; gap:8px; max-height:380px; overflow-y:auto; } .demo-record { display:flex; align-items:center; gap:13px; padding:11px 13px; border:1px solid #e4eef3; border-radius:13px; background:#fff; } .demo-record-avatar { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:12px; background:#e3f2fa; color:var(--ru2f-blue-800); font-weight:800; } .demo-record-name { flex:1; min-width:0; overflow-wrap:anywhere; } .demo-record-name strong { display:block; color:var(--ru2f-blue-950); font-size:.91rem; } .demo-record-name small { display:block; color:var(--ink-650); font-size:.74rem; } .demo-state { padding:8px 12px; white-space:nowrap; border-radius:30px; background:#e7f1fb; color:var(--ru2f-blue-900); font-size:.74rem; font-weight:730; cursor:pointer; border:1px solid transparent; } .demo-state.is-done { background:#dcf7e9; color:var(--ru2f-green-700); } .demo-feedback { font-size:.83rem; margin:15px 0 0; color:var(--ink-650); } .demo-task-progress { margin:0 0 24px; } .demo-task-progress progress { width:100%; } .demo-task-list { display:grid; gap:10px; } .demo-task { display:flex; align-items:center; gap:16px; border:1px solid #e0ecf2; border-radius:13px; padding:15px 16px; cursor:pointer; } .demo-task input { flex:none; } .demo-task strong { display:block; color:var(--ink-950); } .demo-task small { color:var(--ink-650); font-size:.75rem; } .demo-task:has(input:checked) { background:#f1faf5; border-color:#cde9d9; } .demo-task input:checked + span strong { color:var(--ru2f-green-700); } .demo-period-control { display:grid; gap:4px; font-size:.8rem; min-width:125px; font-weight:680; } .demo-period-control .select { width:100%; } .demo-chart-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; } .demo-chart-kpis > div { background:#f3f9fb; border:1px solid #e1edf4; border-radius:13px; padding:14px; } .demo-chart-kpis small { display:block; font-size:.72rem; color:var(--ink-650); } .demo-chart-kpis strong { display:block; font-size:1.65rem; color:var(--ru2f-blue-950); } .demo-chart-box { height:260px; position:relative; overflow:hidden; } .demo-chart-box canvas { width:100% !important; height:100% !important; } .demo-chart-fallback { display:flex; align-items:end; justify-content:space-around; gap:7px; position:absolute; inset:12px 0; padding:0 12px; border-bottom:1px solid var(--line-strong); } .demo-chart-fallback i { display:block; flex:1; border-radius:8px 8px 0 0; background:linear-gradient(#1da9c7,#0b4f88); } .brief-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,90px); align-items:start; } .brief-aside { position:sticky; top:calc(var(--header-height) + 35px); } .brief-aside h2 { font-size:clamp(1.7rem,3vw,2.7rem); } .brief-aside-note.card { display:flex; flex-direction:row; align-items:flex-start; gap:14px; padding:18px; margin-top:25px; border:1px solid var(--line); border-radius:15px; background:var(--surface-soft); } .brief-aside-note .ru-card-icon { flex:none; } .brief-aside-note p { margin:0; font-size:.88rem; } .brief-card.card { display:block; border:1px solid var(--line); border-radius:22px; padding:clamp(22px,4vw,48px); box-shadow:var(--shadow-sm); background:#fff; } .brief-card .alert { margin-bottom:20px; } .brief-progress { display:grid; gap:9px; margin-bottom:28px; font-size:.83rem; color:var(--ru2f-blue-800); font-weight:790; } .brief-progress progress { width:100%; } .brief-step { display:grid; gap:18px; border:0; padding:0; margin:0; min-width:0; } .brief-step legend { display:block; width:100%; font-size:clamp(1.34rem,2.2vw,1.75rem); color:var(--ru2f-blue-950); font-weight:790; margin-bottom:12px; line-height:1.2; } .brief-step > p { margin-bottom:0; } .brief-step .form-field { width:100%; } .brief-step .select,.brief-step .textarea { width:100%; max-width:100%; } .brief-disclaimer { padding:10px 13px; background:#effaf7; border-radius:10px; font-size:.84rem; } .brief-navigation { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:26px; } .brief-navigation button[data-brief-next],.brief-navigation button[data-brief-submit] { margin-left:auto; } .brief-card .form-note { margin-top:20px; font-size:.81rem; } .home-examples-teaser { background:linear-gradient(128deg,#072f53,#0b4f88 75%,#087a54); } .home-examples-layout { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(22px,5vw,70px); align-items:center; } .home-examples-layout .eyebrow { color:#8ee4cb; } .home-examples-layout h2 { color:#fff; } .home-examples-layout p { color:#d7e8f4; } .home-examples-layout .button-secondary { color:#fff; border-color:#cee4f7; } .home-examples-window { padding:24px; background:#fff; border-radius:22px; box-shadow:0 24px 75px #001d3450; transform:rotate(-2deg); } .home-examples-top { display:flex; justify-content:space-between; gap:10px; padding:6px 0 18px; border-bottom:1px solid var(--line); color:var(--ru2f-blue-950); font-weight:780; } .home-examples-top i { font-size:.75rem; font-style:normal; padding:2px 10px; border-radius:99px; background:#e1f6ed; color:#087a54; } .home-examples-window > div { display:grid; gap:11px; padding-top:20px; } .home-examples-window > div > span { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px; background:#f2f8fb; border-radius:10px; color:#134a74; font-weight:780; } .home-examples-window b { font-size:.75rem; font-weight:730; color:#087a54; } .faq-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,90px); } .faq-items { display:grid; gap:11px; } .faq-items details { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; } .faq-items summary { cursor:pointer; color:var(--ru2f-blue-950); font-size:1rem; font-weight:780; } .faq-items details[open] { border-color:#9fdacc; } .faq-items details p { margin:13px 0 0; } @media(max-width:1050px) { .portfolio-case { grid-template-columns:1fr 1fr; } .portfolio-copy { padding:27px; } .demo-workbench { grid-template-columns:230px minmax(0,1fr); } .demo-switch { padding:12px; } } @media(max-width:900px) { .portfolio-close { flex-direction:column; align-items:flex-start; } .demo-workbench { grid-template-columns:1fr; } .demo-switcher { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .demo-switch { min-height:80px; } .demo-switch-cta { grid-column:1/-1; } .brief-layout, .faq-layout { grid-template-columns:1fr; } .brief-aside { position:static; } } @media(max-width:720px) { .portfolio-case,.home-examples-layout { grid-template-columns:1fr; } .portfolio-case:nth-child(even) .portfolio-visual { order:0; } .portfolio-visual { padding:26px; min-height:320px; } .portfolio-copy { padding:27px; } .demo-heading,.demo-panel-header { flex-direction:column; align-items:start; } .demo-switcher { grid-template-columns:1fr; } .demo-switch { min-height:65px; } .demo-window-bar { flex-wrap:wrap; } .home-examples-window { transform:none; } } @media(max-width:440px) { .portfolio-ui-lines > span { font-size:.72rem; gap:7px; padding:9px; } .portfolio-ui-kpis { gap:6px; } .portfolio-ui-kpis div { padding:12px 7px; } .portfolio-ui-kpis small { font-size:.62rem; } .portfolio-schedule { padding:8px; gap:5px; } .portfolio-schedule > i { font-size:.6rem; } .demo-window-bar .badge { display:none; } .demo-record { gap:7px; padding:10px 8px; } .demo-record-avatar { width:32px; height:32px; } .demo-state { padding:6px; font-size:.69rem; } .demo-add-form > div { flex-direction:column; } .demo-chart-kpis { gap:6px; } .demo-chart-kpis > div { padding:9px 6px; } .demo-chart-kpis small { font-size:.61rem; } .demo-chart-kpis strong { font-size:1.26rem; } .demo-content { padding:16px 12px; } .brief-card.card { padding:19px 15px; } .brief-navigation { flex-direction:column; align-items:stretch; } .brief-navigation button { width:100%; margin:0 !important; } .home-examples-window > div > span { padding:12px; font-size:.83rem; } } @media(prefers-reduced-motion:reduce) { .demo-switch,.home-examples-window { transform:none !important; transition:none !important; } } .demo-content { scroll-margin-top:calc(var(--header-height) + 20px); } /* RU2F — Réalisation Gestilib : présentation client et médias responsives. */ .gestilib-hero { overflow:hidden; background:radial-gradient(circle at 90% 0%,#d5eeff 0,transparent 45%),linear-gradient(135deg,#f5fbff 0%,#fff 55%,#edf9f5 100%); } .gestilib-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.94fr); align-items:center; gap:clamp(28px,4vw,70px); } .gestilib-hero-copy h1 { font-size:clamp(2.55rem,4.5vw,4.8rem); line-height:1.10; letter-spacing:-.048em; max-width:710px; } .gestilib-hero-copy h1 span { background:linear-gradient(100deg,#0b4f88,#126ba2 47%,#0b9d68);background-clip:text;-webkit-background-clip:text;color:transparent; } .gestilib-hero-copy > p:not(.eyebrow) { max-width:665px; } .gestilib-project-credit { color:var(--ink-650); font-size:.85rem; line-height:1.6; margin:24px 0 0; } .gestilib-hero-image,.gestilib-module-figure { margin:0; } .gestilib-hero-image { background:#fff; padding:13px; border:1px solid #d7e6f0; border-radius:27px; box-shadow:var(--shadow-md); transform:rotate(1deg); } .gestilib-hero-image picture,.gestilib-module-figure picture { display:block; overflow:hidden; border-radius:15px; } .gestilib-hero-image img,.gestilib-module-figure img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; } .gestilib-hero-image figcaption { padding:9px 12px 3px; text-align:center; color:var(--ink-650); font-size:.78rem; } .gestilib-intro { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr); gap:25px; align-items:end; margin-bottom:30px; } .gestilib-intro h2 { max-width:680px; } .gestilib-intro > p { margin:0; color:var(--ink-650); } .gestilib-module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } .gestilib-module-card { min-width:0; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); } .gestilib-module-figure { padding:14px 14px 0; background:linear-gradient(150deg,#e9f5fc,#f6fbfe); } .gestilib-module-figure picture { background:#fff; border:1px solid #e3edf4; } .gestilib-module-figure figcaption { color:var(--ink-650); font-size:.79rem; padding:10px 3px; } .gestilib-module-copy { padding:clamp(21px,3vw,35px); } .gestilib-module-copy h3 { font-size:clamp(1.3rem,1.9vw,1.85rem); line-height:1.25; letter-spacing:-.028em; margin:10px 0 12px; } .gestilib-module-copy p { color:var(--ink-650); margin:0 0 20px; } .gestilib-module-copy .text-link { display:inline-flex; align-items:center; gap:8px; line-height:1.4; } .gestilib-module-copy .text-link svg { flex-shrink:0; } .gestilib-next { display:flex; align-items:center; justify-content:space-between; gap:42px; } .gestilib-next > div:first-child { max-width:750px; } .gestilib-next h2 { max-width:750px; } .gestilib-next-actions { display:grid; justify-items:start; gap:18px; flex-shrink:0; } .gestilib-module-card,.gestilib-hero-image { transition:box-shadow .25s ease,transform .25s ease; } @media (hover:hover) and (prefers-reduced-motion:no-preference){ .gestilib-module-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); } } @media(max-width:900px){.gestilib-hero-grid{grid-template-columns:1fr;}.gestilib-hero-image{max-width:650px;margin:0 auto;transform:none}.gestilib-next{flex-direction:column;align-items:flex-start}.gestilib-next-actions{width:100%}} @media(max-width:680px){.gestilib-intro,.gestilib-module-grid{grid-template-columns:1fr}.gestilib-hero-copy h1{font-size:clamp(2.15rem,9vw,3.3rem)}.gestilib-hero-grid{gap:24px}.gestilib-module-grid{gap:20px}.gestilib-module-figure{padding:10px 10px 0}.gestilib-module-copy{padding:22px}.gestilib-hero-image{padding:9px;border-radius:20px}.gestilib-project-credit{font-size:.8rem}} @media(prefers-reduced-motion:reduce){.gestilib-module-card,.gestilib-hero-image{transition:none}} /* Réalisations et page Gestilib détaillée */ .section-heading-inline, .project-gallery-header, .project-path-grid, .project-detail-hero-grid, .project-listing-grid, .project-cta-grid, .project-gallery-layout { display: grid; gap: 28px; } .project-listing-grid, .project-detail-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr); align-items: start; } .project-listing-copy, .project-detail-copy { display: grid; gap: 18px; } .project-benefit-list, .project-insight-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .project-benefit-list li, .project-insight-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--ink-700); } .project-benefit-list .ru-icon, .project-insight-list .ru-icon { color: var(--ru2f-green-600); margin-top: 1px; } .project-listing-figure, .project-summary-card, .project-shot-card, .project-gallery-aside, .project-side-nav, .project-cta-strip, .project-path-actions, .project-path-copy { border: 1px solid rgba(12, 58, 92, 0.08); box-shadow: 0 18px 36px rgba(11, 53, 84, 0.08); } .project-listing-figure, .project-shot-card, .project-gallery-aside, .project-side-nav { background: #fff; border-radius: 28px; } .project-listing-figure, .project-shot-card { padding: 18px; } .project-listing-figure img, .project-shot-card img, .project-summary-card img { width: 100%; height: auto; display: block; border-radius: 20px; } .project-listing-figure figcaption, .project-shot-card figcaption { margin-top: 14px; color: var(--ink-500); font-size: 0.94rem; } .project-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .project-summary-card { overflow: hidden; background: #fff; border-radius: 26px; } .project-summary-copy { padding: 18px 20px 22px; display: grid; gap: 10px; } .project-path-grid { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); align-items: start; } .project-path-copy, .project-path-actions { background: rgba(255,255,255,0.72); backdrop-filter: blur(10px); border-radius: 26px; padding: 24px; } .project-path-actions { display: grid; gap: 14px; } .project-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .project-trust-grid > div { background: rgba(255,255,255,0.85); border: 1px solid rgba(12, 58, 92, 0.09); border-radius: 18px; padding: 14px 16px; display: grid; gap: 4px; } .project-trust-grid strong { color: var(--ru2f-blue-900); font-size: 0.98rem; } .project-trust-grid span, .project-disclaimer { color: var(--ink-600); font-size: 0.95rem; } .project-side-nav { padding: 18px; position: sticky; top: calc(var(--header-height) + 24px); display: grid; gap: 10px; } .project-side-nav a { color: var(--ink-700); text-decoration: none; border: 1px solid rgba(12, 58, 92, 0.08); border-radius: 14px; padding: 12px 14px; font-weight: 600; background: linear-gradient(180deg, rgba(245,249,253,0.95), rgba(255,255,255,0.95)); } .project-side-nav a:hover { color: var(--ru2f-blue-700); border-color: rgba(29, 169, 199, 0.45); } .project-gallery-section { scroll-margin-top: calc(var(--header-height) + 20px); } .project-gallery-header { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: end; margin-bottom: 28px; } .project-gallery-header > p { margin: 0; color: var(--ink-600); } .project-gallery-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); align-items: start; } .project-gallery-layout-wide { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); } .project-gallery-media-grid { display: grid; gap: 18px; } .project-gallery-aside { padding: 22px; display: grid; gap: 18px; } .project-gallery-aside h3 { margin: 0; } .project-cta-strip { background: linear-gradient(135deg, rgba(6,47,85,0.96), rgba(11,79,136,0.92) 44%, rgba(11,157,104,0.88)); color: #fff; border-radius: 30px; padding: 32px; } .project-cta-grid { grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); align-items: center; } .project-cta-strip .eyebrow, .project-cta-strip h2, .project-cta-strip p { color: #fff; } .project-cta-actions { display: grid; gap: 14px; justify-items: stretch; } @media (max-width: 1100px) { .project-listing-grid, .project-detail-hero-grid, .project-path-grid, .project-cta-grid, .project-gallery-header, .project-gallery-layout { grid-template-columns: 1fr; } .project-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-side-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .project-summary-grid, .project-trust-grid, .project-side-nav { grid-template-columns: 1fr; } .project-listing-figure, .project-shot-card, .project-gallery-aside, .project-path-copy, .project-path-actions, .project-cta-strip { padding: 16px; } .project-summary-copy { padding: 16px 16px 20px; } }
/* Hauteurs du graphique de secours : CSS centralisé, sans attributs style. */
.demo-chart-fallback i:nth-child(1) { height: 35%; }
.demo-chart-fallback i:nth-child(2) { height: 55%; }
.demo-chart-fallback i:nth-child(3) { height: 43%; }
.demo-chart-fallback i:nth-child(4) { height: 70%; }
.demo-chart-fallback i:nth-child(5) { height: 60%; }
.demo-chart-fallback i:nth-child(6) { height: 87%; }
.demo-chart-fallback i:nth-child(7) { height: 76%; }


/* 1.1.3 : alignement vertical des sections à deux colonnes et centrage strict des icônes. */
.split-heading { align-items:center; }
.split-heading > p { align-self:center; margin-block:0; }
.ru-card-icon { display:inline-grid; place-items:center; padding:0; line-height:1; vertical-align:middle; }
.ru-card-icon > .ru-icon, .ru-card-icon > i { display:block; margin:auto; justify-self:center; align-self:center; }
.ru-card-icon > i { font-size:1.45rem; line-height:1; }
/* ALTCHA utilise les composants et couleurs déjà présents sur le site. */
.altcha-wrap { display:grid; gap:10px; margin-top:24px; }
.altcha-title { margin:0; color:var(--ink-800); font-size:.9rem; font-weight:730; }
.altcha-control { display:flex; align-items:center; gap:12px; width:min(100%,420px); min-height:65px; padding:12px 16px; border:1px solid #c6d8e1; border-radius:12px; color:var(--ink-950); background:#f8fbfc; cursor:pointer; }
.altcha-control input { flex:none; width:19px; height:19px; accent-color:var(--ru2f-green-700); }
.altcha-control span { flex:1; font-weight:670; }
.altcha-brand { color:var(--ru2f-green-700); font-size:.75rem; letter-spacing:.04em; }
.altcha-control:focus-within { outline:3px solid rgba(29,169,199,.22); outline-offset:2px; }
.altcha-status { margin:0; color:var(--ink-650); font-size:.83rem; }
@media(max-width:680px) { .split-heading { align-items:start; } .split-heading > p { align-self:start; } }