/* ========================================================================= CTA PAYE Consulting - design system Minimaliste (OpenAI / Anthropic / Linear) : surfaces plates au repos, hairlines, accent #DB3238 / navy #16235e. Cohérence pilotée par tokens : rayons (--r-*), transitions (--t*), élévation (--shadow-*), focus (--ring). Élévation réservée aux états (hover, dropdowns, toasts, bandeau CTA). ========================================================================= */ /* Police auto-hébergée (RGPD : aucune requête vers Google Fonts). Fonte variable 200-800 : couvre les graisses 400/500/600/700/800 utilisées. */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Marque */ --red: #DB3238; /* accent - CTA / boutons */ --red-d: #b9272d; --red-h: #F68C1C; /* hover des boutons d'accentuation (orange) */ --red-t: #fbeaeb; /* teinte très claire */ --navy: #16235e; /* bleu marine - titres */ --orange: #f7941d; /* orange du logo - aplats / icônes / graphiques */ --orange-d: #c2540b; /* orange foncé lisible - texte/traits accent (contraste AA) */ --orange-t: #fdeede; /* teinte très claire (fonds d'accent doux) */ /* Neutres (off-white doux + hairlines) */ --bg: #ffffff; --surface: #f7f8fa; --surface-2: #eef1f5; --ink: #16235e; --ink-2: #3a4156; /* corps */ --muted: #6b7280; --line: #e7e9ee; /* hairline */ --line-2: #d9dde4; --line-hover:#c3c9d4; --ok: #119067; /* Surfaces themables (cartes, header) — séparées de --bg pour le dark mode */ --card: #ffffff; /* fond des cartes / inputs / panneaux */ --card-2: #fcfdfe; /* survol de carte (très légèrement teinté) */ --header-bg: rgba(255,255,255,.8); /* header sticky (translucide) */ --glass: rgba(255,255,255,.72); /* surfaces flottantes (verre dépoli) */ /* Dégradés (réservés au logo, hero, bandeaux CTA) */ --grad-brand: linear-gradient(120deg, #f7941d 0%, #ef5a2a 45%, #DB3238 100%); --grad-hero: linear-gradient(118deg, #dbe9fc 0%, #e4ecfb 38%, #f1e6f0 66%, #fce7da 100%); --grad-hero-soft: linear-gradient(160deg, #fdfdff 0%, #f6f8fd 58%, #fdf6f1 100%); --grad-footer: linear-gradient(118deg, #f4f8fd 0%, #f7f5fb 52%, #fdf7f1 100%); --grad-band: linear-gradient(112deg, #2f6fe0 0%, #4a6fdc 24%, #8e4c93 48%, #cf2f34 76%, #DB3238 88%, #f7941d 112%); --grad-soft: linear-gradient(135deg, #fff3e9 0%, #fbeaeb 100%); /* Forme — rayons légèrement adoucis (plus moderne) */ --r-xs: 9px; --r-sm: 11px; --r: 16px; --r-lg: 22px; --r-pill: 999px; --maxw: 1120px; --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(.22,.61,.36,1); /* Transitions cohérentes */ --t-fast: .15s var(--ease); --t: .2s var(--ease); /* Élévation — ombres douces, teintées marine, échelle unique */ --shadow-sm: 0 2px 6px -2px rgba(22,35,94,.06), 0 6px 18px -10px rgba(22,35,94,.10); --shadow-md: 0 14px 34px -20px rgba(22,35,94,.30); --shadow-lg: 0 24px 60px -20px rgba(22,35,94,.28); --shadow-pop: 0 14px 44px rgba(22,35,94,.14); --ring: 0 0 0 3px rgba(22,35,94,.10); color-scheme: light; } /* ========================================================================= DARK MODE — pilotage par tokens, UNIQUEMENT sur choix manuel. À la première visite (aucune préférence enregistrée), le site reste CLAIR, même si le système est en sombre. Le mode sombre s'active via la bascule du footer (, persistée en localStorage). --navy reste la teinte de marque pour les FONDS/bordures (boutons, bandeaux) ; le texte/les titres utilisent --ink (clair en sombre). ========================================================================= */ :root[data-theme="dark"] { --bg: #0e1220; --surface: #161b2c; --surface-2: #1f2538; --card: #171d30; --card-2: #1c2336; --header-bg: rgba(14,18,32,.82); --ink: #eaeef7; --ink-2: #c2cadb; --muted: #94a0b8; --line: #2a3248; --line-2: #343d56; --line-hover:#46506e; --navy: #4666c8; --ok: #1ea886; --red-t: #2a1d22; --orange-d: #ff9f33; /* orange plus lumineux sur fond sombre */ --orange-t: #2a1d12; --grad-hero-soft: linear-gradient(160deg, #141a2c 0%, #11182a 58%, #1a1426 100%); --grad-hero: linear-gradient(118deg, #141d33 0%, #161a2e 38%, #1c1626 66%, #221a18 100%); --grad-footer: linear-gradient(118deg, #121829 0%, #14121f 52%, #1a1622 100%); --grad-soft: linear-gradient(135deg, #221a14 0%, #2a1d22 100%); --glass: rgba(20,25,42,.72); --shadow-sm: 0 2px 6px -2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.5); --shadow-md: 0 14px 34px -20px rgba(0,0,0,.6); --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.6); --shadow-pop: 0 14px 44px rgba(0,0,0,.5); --ring: 0 0 0 3px rgba(110,140,255,.28); color-scheme: dark; } * { box-sizing: border-box; } /* Échelle typo globale : root réduit → tous les textes (rem) baissent d'~1px. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 14.5px; } html.page-espace-client { font-size: 15px; } body { margin: 0; font-family: var(--font); color: var(--ink-2); background: var(--bg); line-height: 1.65; font-size: 1.067rem; /* ≈ 16px (au lieu de 17) */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; display: block; } /* ── Scrollbar minimaliste (WebKit + Firefox) ──────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: var(--line-hover) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-hover); border-radius: var(--r-pill); border: 3px solid var(--bg); /* marge → pouce visuellement fin */ background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: #9aa1ad; } ::-webkit-scrollbar-thumb:active { background: var(--muted); } ::-webkit-scrollbar-corner { background: transparent; } a { color: var(--red); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--red-d); } /* Sélection de texte aux teintes de marque (détail soigné) */ ::selection { background: rgba(219,50,56,.15); color: var(--ink); } /* Ancrage des liens internes sous le header sticky (≈66px) */ :where(h1, h2, h3, [id]) { scroll-margin-top: 86px; } h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5em; line-height: 1.12; letter-spacing: -.021em; font-weight: 700; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.3rem); font-weight: 800; letter-spacing: -.03em; } h2 { font-size: clamp(1.55rem, 3.2vw, 2.15rem); } h3 { font-size: 1.16rem; letter-spacing: -.012em; } p { margin: 0 0 1rem; text-wrap: pretty; } strong { color: var(--ink); font-weight: 600; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } /* Accessibilité : focus visible cohérent (clavier) */ :focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; } .btn:focus-visible { outline-offset: 3px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 1000; } .skip-link:focus { left: 0; top: 0; } /* ── Typo utilitaires ──────────────────────────────────────────────────── */ .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .15em; font-size: .73rem; font-weight: 700; color: var(--orange-d); margin-bottom: .7em; } .lead { font-size: 1.16rem; color: var(--muted); line-height: 1.6; } .muted { color: var(--muted); } .text-center { text-align: center; } .mt-2 { margin-top: 26px; } .mt-3 { margin-top: 42px; } /* ── Boutons (solides, plats, hover = changement de fond uniquement) ────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: 12px 24px; border-radius: var(--r-sm); font-weight: 600; font-size: .95rem; line-height: 1; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(0); } .btn svg { width: 16px; height: 16px; flex: 0 0 auto; } /* CTA solides : léger relief + lift au survol (tactile, sans casser le « plat ») */ .btn-primary { background: linear-gradient(120deg,#DB3238 0%,#ef5a2a 55%,#f7941d 100%); color: #fff; border: none; box-shadow: 0 2px 0 #b85a10, 0 4px 14px rgba(219,50,56,.22); } .btn-primary:hover { background: linear-gradient(120deg,#DB3238 0%,#ef5a2a 55%,#f7941d 100%); color: #fff; opacity: .93; box-shadow: 0 2px 0 #b85a10, 0 6px 18px rgba(219,50,56,.32); transform: translateY(-1px); } .btn-accent { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(22,35,94,.14); } .btn-accent:hover { background: #0f1942; color: #fff; box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-secondary { background: #e8ecf5; color: #16235e; border: none; box-shadow: 0 2px 0 #c4cce0, 0 2px 8px rgba(22,35,94,.08); } .btn-secondary:hover { background: #dce3f0; color: #16235e; box-shadow: 0 2px 0 #b5bfd6, 0 4px 12px rgba(22,35,94,.12); transform: translateY(-1px); } .btn-ghost { background: var(--surface-2); color: var(--ink-2); font-weight: 400; border: none; } .btn-ghost:hover { background: var(--line-2); color: var(--ink); } .btn-lg { /* même taille que base — réservé aux variations sémantiques */ } /* ── Header / nav ──────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; max-width: 1280px; gap: 22px; } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand:hover { text-decoration: none; } .brand-logo { height: 38px; width: auto; display: block; } .brand-logo--footer { height: 42px; } .brand-mark { background: var(--grad-brand); color: #fff; font-weight: 800; letter-spacing: .02em; padding: 8px 9px; border-radius: 10px; font-size: .9rem; line-height: 1; } .brand-text { font-weight: 800; color: var(--ink); letter-spacing: -.01em; line-height: 1; font-size: 1rem; } .brand-text small { display: block; font-weight: 500; font-size: .57rem; color: var(--muted); letter-spacing: .2em; text-transform: uppercase; margin-top: 3px; } .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px; cursor: pointer; border-radius: var(--r-xs); } .nav-toggle:hover { background: var(--surface); } .nav-toggle span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: .25s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Menu mobile (dropdown) - base */ .main-nav { position: fixed; inset: 66px 0 auto 0; background: var(--card); border-bottom: 1px solid var(--line); transform: translateY(-130%); transition: transform .3s var(--ease); padding: 14px 22px 22px; } .main-nav.open { transform: translateY(0); } .nav-links { list-style: none; margin: 0 0 8px; padding: 0; } .nav-links li a { display: block; padding: 13px 4px; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); white-space: nowrap; } .nav-links li a:hover { color: var(--red); } .nav-links li a.is-active { color: var(--red); font-weight: 600; } .nav-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 12px; } .nav-icon { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-xs); color: var(--ink); transition: background .15s var(--ease), color .15s var(--ease); border:none;background:none;padding:0;cursor:pointer; } .nav-icon svg { width: 21px; height: 21px; } .nav-icon:hover { background: var(--surface-2); color: var(--red); } .cart-badge { position: absolute; top: 3px; right: 2px; display: grid; place-items: center; min-width: 16px; height: 16px; background: var(--red); color: #fff; font-size: .64rem; font-weight: 700; border-radius: var(--r-pill); padding: 0 4px; } .nav-account { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 500; font-size: .94rem; padding: 9px 6px; } .nav-account svg { width: 18px; height: 18px; } .nav-account:hover { color: var(--red); } .nav-cta { flex: 1 0 100%; width: 100%; } /* ── Sections ──────────────────────────────────────────────────────────── */ .section { padding: 72px 0; } .section--alt { background: var(--surface); } .section-head { max-width: 680px; margin: 0 auto 44px; text-align: center; } .section-head .lead, .section-head p { color: var(--muted); } /* ── Hero (épuré : fond ultra-light + halo chaud discret en haut-droite) ── */ .hero { position: relative; overflow: hidden; isolation: isolate; background: var(--grad-hero-soft); color: var(--ink-2); padding: 94px 0 100px; border-bottom: .5px solid var(--line); } /* Accent de marque sobre (orange → rouge), façon halo doux. Raccord logo/CTA. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(46% 62% at 100% -4%, rgba(247,148,29,.22), transparent 62%), radial-gradient(40% 54% at 82% 14%, rgba(219,50,56,.10), transparent 66%); animation: heroHalo 18s ease-in-out infinite; } @keyframes heroHalo { 0%, 100% { opacity: 1; } 50% { opacity: .78; } } @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } } .hero > .container { position: relative; z-index: 1; } .hero h1 { color: var(--ink); max-width: 16ch; } /* Filet de marque sous le titre : accent structurel discret (orange → rouge). */ .hero h1::after { content: ""; display: block; width: 64px; height: 4px; margin: 24px 0 2px; border-radius: var(--r-pill); background: var(--grad-brand); } .hero p { color: var(--ink-2); font-size: 1.18rem; max-width: 54ch; } .hero .eyebrow { color: var(--orange-d); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-trust { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px 26px; color: var(--muted); font-size: .92rem; } .hero-trust span { display: inline-flex; align-items: center; gap: 8px; } .hero-trust svg:not(.silae-logo) { width: 18px; height: 18px; color: var(--red); flex: 0 0 auto; } /* boutons du hero clair : primaire rouge, secondaire marine (override inline) */ .hero .btn-accent { background: var(--red); color: #fff; } .hero .btn-accent:hover { background: var(--red-h); } .hero .btn-ghost { background: var(--surface-2); color: var(--ink-2); border: none; } .hero .btn-ghost:hover { background: var(--line-2); color: var(--ink); } /* ── Hero : 2 colonnes (copie + visuel) ────────────────────────────────── */ .hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,440px); gap: 56px; align-items: center; } .hero-copy { min-width: 0; } .hero-copy h1, .hero-copy p { max-width: none; } /* Visuel décoratif : aperçu de bulletin de paie, construit en CSS pur */ .hero-visual { position: relative; } .payslip { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 22px 22px 26px; transform: rotate(-1.4deg); transition: transform var(--t); } .hero-visual:hover .payslip { transform: rotate(0); } .payslip-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .payslip-ico { width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--red); background: var(--red-t); } .payslip-ico svg { width: 20px; height: 20px; } .payslip-meta { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; } .payslip-meta strong { color: var(--ink); font-size: .95rem; } .payslip-meta span { color: var(--muted); font-size: .8rem; } .payslip-status { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); background: rgba(17,144,103,.10); border-radius: var(--r-pill); padding: 5px 11px; font-size: .76rem; font-weight: 600; } .payslip-status svg { width: 14px; height: 14px; } .payslip-rows { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; } .payslip-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 2px; font-size: .92rem; color: var(--ink-2); } .payslip-row + .payslip-row { border-top: 1px solid var(--line); } .payslip-row b { color: var(--ink); font-variant-numeric: tabular-nums; } .payslip-row b.neg { color: var(--muted); font-weight: 600; } .payslip-row b.muted { color: var(--ink-2); font-weight: 600; } .payslip-net { margin-top: 6px; padding: 14px 14px; border-radius: var(--r-sm); background: var(--surface); border-top: 0 !important; } .payslip-net span { color: var(--ink); font-weight: 600; } .payslip-net b { font-size: 1.18rem; } .payslip-bar { margin-top: 16px; height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; } .payslip-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); } .payslip-foot { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; color: var(--muted); font-size: .76rem; } .payslip-foot span { display: inline-flex; align-items: center; gap: 6px; } .payslip-foot svg { width: 13px; height: 13px; color: var(--muted); } /* Variantes de la carte hero réutilisées sur les pages internes ---------- */ .payslip-status.is-wait { color: #a86511; background: rgba(247,148,29,.14); } /* Pastille de statut à droite d'une ligne (validé / en cours / à venir) */ .payslip-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); white-space: nowrap; } .payslip-pill.is-ok { color: var(--ok); background: rgba(17,144,103,.10); } .payslip-pill.is-wait { color: #a86511; background: rgba(247,148,29,.14); } /* Ligne « client » : avatar initiales + nom/effectif + pastille */ .payslip-client { gap: 12px; } .payslip-cleft { display: flex; align-items: center; gap: 11px; min-width: 0; } .payslip-avatar { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .72rem; font-weight: 700; background: var(--navy); } .payslip-cname { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .payslip-cname strong { color: var(--ink); font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .payslip-cname small { color: var(--muted); font-size: .74rem; } /* Badges flottants autour de la carte */ .hero-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-md); border-radius: var(--r-pill); padding: 9px 14px; font-size: .82rem; font-weight: 600; color: var(--ink); animation: heroFloat 6s ease-in-out infinite; } .hero-chip svg { width: 16px; height: 16px; } .hero-chip-1 { top: -18px; left: -26px; } .hero-chip-1 svg { color: var(--red); } .hero-chip-2 { bottom: -16px; right: -22px; animation-delay: -3s; } .hero-chip-2 svg { color: var(--orange); } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (prefers-reduced-motion: reduce) { .hero-chip { animation: none; } } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 64px; } .hero-copy h1 { max-width: 16ch; } .hero-copy p:not(.eyebrow) { max-width: 54ch; } .hero-visual { max-width: 420px; margin: 0 auto; } } @media (max-width: 560px) { .hero-chip-1 { left: -8px; } .hero-chip-2 { right: -6px; } } /* ── Cartes (plates, hairline, hover = bordure + fond très subtils) ─────── */ .cards { display: grid; gap: 18px; grid-template-columns: 1fr; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; transition: border-color .18s var(--ease), background .18s var(--ease); } .card:hover { border-color: var(--line-hover); background: var(--card-2); } .card-media { display: block; width: calc(100% + 56px); max-width: none; margin: -28px -28px 18px; height: 158px; object-fit: cover; border-radius: var(--r) var(--r) 0 0; background: var(--surface); } .card .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--grad-soft); color: var(--red); display: grid; place-items: center; margin-bottom: 18px; } .card .ico svg { width: 23px; height: 23px; } .card h3 { margin-bottom: .5em; } .card p { color: var(--muted); margin-bottom: 1.1rem; } .card p svg { width: 14px; height: 14px; flex: 0 0 auto; } .card a.card-link { font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: 6px; transition: gap .15s var(--ease); } .card a.card-link:hover { gap: 9px; color: var(--red-d); } /* Carte entièrement cliquable (stretched link) : un seul vrai lien, la zone couvre toute la carte */ .card--clickable { position: relative; cursor: pointer; } .card--clickable .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .card--clickable:hover .card-link { gap: 9px; color: var(--red-d); } .card--clickable .card-link:focus-visible { outline: none; } .card--clickable:focus-within { border-color: var(--line-hover); box-shadow: var(--shadow-md); } /* ── Étapes ────────────────────────────────────────────────────────────── */ .steps { display: grid; gap: 18px; grid-template-columns: 1fr; counter-reset: step; } .step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px 22px; position: relative; transition: border-color .18s var(--ease); } .step:hover { border-color: var(--line-hover); } .step::before { counter-increment: step; content: counter(step); position: absolute; top: -14px; left: 24px; width: 32px; height: 32px; background: var(--navy); color: #fff; border-radius: var(--r-pill); display: grid; place-items: center; font-weight: 700; font-size: .9rem; } .step h3 { margin-top: 10px; } .step p { color: var(--muted); margin: 0; } /* ── Tableau ───────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); } table.matrix { width: 100%; border-collapse: collapse; min-width: 480px; } table.matrix th, table.matrix td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); } table.matrix thead th { background: var(--surface); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; } table.matrix tbody tr:last-child td { border-bottom: 0; } /* ── Bénéfices ─────────────────────────────────────────────────────────── */ .benefits { display: grid; gap: 22px 28px; grid-template-columns: 1fr; } .benefit { display: flex; gap: 14px; } .benefit .dot { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--orange-t); color: var(--red); display: grid; place-items: center; margin-top: 2px; } .benefit .dot svg { width: 16px; height: 16px; } .benefit strong { display: block; margin-bottom: 3px; } .benefit div { color: var(--muted); } /* ── FAQ ───────────────────────────────────────────────────────────────── */ .faq { max-width: 780px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 22px 4px; font-size: 1.05rem; font-weight: 600; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; } .faq-q::after { content: ""; width: 10px; height: 10px; flex: 0 0 auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .25s var(--ease); margin-right: 6px; } .faq-q:hover { color: var(--red); } .faq-item.open .faq-q::after { transform: rotate(-135deg); border-color: var(--red); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); } .faq-a div { padding: 0 4px 22px; color: var(--muted); } /* ── Bandeau CTA (dégradé de marque) ───────────────────────────────────── */ .cta-band { background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: 56px 40px; text-align: center; box-shadow: var(--shadow-md); } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(255,255,255,.82); max-width: 540px; margin: 0 auto 24px; } .cta-band .btn-accent { background: var(--card); color: var(--ink); } .cta-band .btn-accent:hover { background: var(--card); color: var(--red); } /* ── Formulaires (plats, hairline, focus discret) ──────────────────────── */ .form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; } .field { margin-bottom: 18px; } .field label { display: block; font-weight: 600; margin-bottom: 7px; font-size: .92rem; color: var(--ink); } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; font-size: .98rem; color: var(--ink); background: var(--card); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .field input::placeholder, .field textarea::placeholder { color: #9aa1ad; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-hover); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: var(--ring); } .field textarea { min-height: 130px; resize: vertical; } /* Stepper participants : flèches custom au lieu du spinner natif */ .qty-stepper { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; background: var(--card); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .qty-stepper:hover { border-color: var(--line-hover); } .qty-stepper:focus-within { border-color: var(--navy); box-shadow: var(--ring); } .qty-stepper input { width: 100%; min-width: 0; text-align: center; border: 0; border-radius: 0; padding: 12px 6px; font-weight: 700; font-size: 1.05rem; color: var(--ink); background: transparent; -moz-appearance: textfield; } .qty-stepper input:hover, .qty-stepper input:focus { border: 0; box-shadow: none; } .qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-btn { flex: 0 0 46px; display: grid; place-items: center; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .qty-btn:hover { background: var(--navy); color: #fff; } .qty-btn:active { transform: scale(.94); } .qty-btn:disabled { color: #c2c7d0; background: var(--surface); cursor: not-allowed; } .qty-btn:disabled:hover { background: var(--surface); color: #c2c7d0; } .qty-btn svg { display: block; } /* Téléphone : indicatif pays (drapeau + code) flottant à l'intérieur du champ. Le ) ─── */ .cs { position: relative; } .cs .cs-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; padding: 0; border: 0; } .cs-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); font: inherit; font-size: .98rem; color: var(--ink); cursor: pointer; text-align: left; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .cs-trigger:hover { border-color: var(--line-hover); } .cs.open .cs-trigger { border-color: var(--navy); box-shadow: var(--ring); } .cs-label { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cs-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-label.cs-placeholder { color: #9aa1ad; } /* Chevron — deux barres qui se rejoignent en V */ .cs-chev { flex: 0 0 auto; width: 10px; height: 6px; position: relative; transition: transform .2s var(--ease); } .cs-chev::before, .cs-chev::after { content: ''; position: absolute; bottom: 0; height: 1.5px; width: 6px; background: var(--muted); border-radius: 2px; transition: background .15s; } .cs-chev::before { right: 50%; transform: rotate(45deg); transform-origin: right bottom; } .cs-chev::after { left: 50%; transform: rotate(-45deg); transform-origin: left bottom; } .cs.open .cs-chev { transform: rotate(180deg); } .cs.open .cs-chev::before, .cs.open .cs-chev::after { background: var(--navy); } /* Popup menu */ .cs-menu { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 60; background: var(--card); border: 1px solid rgba(22,35,94,.09); border-radius: var(--r); padding: 5px; max-height: 280px; overflow-y: auto; overflow-x: hidden; box-shadow: 0 2px 6px -1px rgba(22,35,94,.07), 0 8px 20px -4px rgba(22,35,94,.10); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top center; transition: opacity .14s var(--ease), transform .14s var(--ease), visibility 0s .14s; } .cs.open .cs-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity .14s var(--ease), transform .14s var(--ease), visibility 0s 0s; } /* Scrollbar fine dans le menu */ .cs-menu::-webkit-scrollbar { width: 4px; } .cs-menu::-webkit-scrollbar-track { background: transparent; } .cs-menu::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .cs-option { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; cursor: pointer; font-size: .93rem; color: var(--ink-2); transition: background .1s, color .1s; user-select: none; } .cs-option:hover, .cs-option.is-active { background: var(--surface-2); color: var(--ink); } .cs-option.is-sel { color: var(--red); font-weight: 600; background: rgba(219,50,56,.05); } .cs-option.is-sel::after { content: "✓"; color: var(--red); font-weight: 700; margin-left: auto; font-size: .8rem; opacity: .8; } .cs-opt-ico { width: 15px; height: 15px; flex: 0 0 auto; } /* Variante footer (sur fond marine) - menu qui s'ouvre vers le haut */ .cs--footer .cs-trigger { background: var(--card); border-color: var(--line-2); color: var(--ink); padding: 9px 13px; font-size: .9rem; } .cs--footer .cs-trigger:hover { border-color: var(--line-hover); } .cs--footer.open .cs-trigger { border-color: var(--navy); box-shadow: var(--ring); } .cs--up .cs-menu { top: auto; bottom: calc(100% + 5px); transform: translateY(8px) scale(.97); transform-origin: bottom center; } .cs--up.open .cs-menu { transform: translateY(0) scale(1); } .lang-select { max-width: 230px; } /* ── Connexion sociale (Google / Microsoft) ────────────────────────────── */ .oauth-buttons { display: grid; gap: 10px; margin-bottom: 18px; } .btn-oauth { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-weight: 600; font-size: .95rem; transition: background .15s var(--ease), border-color .15s var(--ease); } .btn-oauth:hover { background: var(--surface); border-color: var(--line-hover); color: var(--ink); text-decoration: none; } .btn-oauth svg { flex: 0 0 auto; } .oauth-sep { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .85rem; margin: 4px 0 18px; } .oauth-sep::before, .oauth-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* En-tête de dashboard */ .dash-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; } /* Bande de synthèse (espace client) : 4 mini-cartes icône + valeur + libellé */ .dash-stats { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin: 24px 0 6px; } .dash-stat { display: flex; gap: 13px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; transition: border-color .18s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); } .dash-stat:hover { border-color: var(--line-hover); box-shadow: var(--shadow-md); transform: translateY(-3px); } .dash-stat__ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; background: var(--grad-soft); color: var(--red); display: grid; place-items: center; } .dash-stat__ico svg { width: 21px; height: 21px; } .dash-stat__v { font-weight: 800; color: var(--ink); font-size: 1.12rem; letter-spacing: -.02em; line-height: 1.2; } .dash-stat__l { color: var(--muted); font-size: .84rem; margin-top: 1px; } @media (min-width: 780px) { .dash-stats { grid-template-columns: repeat(4, 1fr); } } /* Carte « Mon compte » : deux colonnes (profil + mot de passe) */ .account-grid { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 840px) { .account-grid { grid-template-columns: 1fr 1fr; } } /* ── Split (contact) ───────────────────────────────────────────────────── */ .split { display: grid; gap: 34px; grid-template-columns: 1fr; } .contact-info address { font-style: normal; color: var(--muted); line-height: 1.9; } /* ── Prose ─────────────────────────────────────────────────────────────── */ .prose p { max-width: 70ch; color: var(--ink-2); line-height: 1.75; } .prose ul { color: var(--ink-2); padding-left: 0; list-style: none; } .prose ul li { margin-bottom: .65em; padding-left: 1.4em; position: relative; } .prose ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); opacity: .85; } .prose li { margin-bottom: .65em; } .prose h2 { margin-top: 1.6em; } .prose h3 { margin-top: 1.2em; margin-bottom: .35em; font-size: 1.08rem; color: var(--ink); } /* ── Logo Silae (logiciel partenaire) ──────────────────────────────────── */ .silae-logo { display: inline-block; vertical-align: middle; width: auto; } .hero-trust .silae-logo { position: relative; top: -1px; height: 28px; width: auto; flex: 0 0 auto; } .stat__num .silae-logo { display: block; margin: 2px auto 0; } /* ── Footer ────────────────────────────────────────────────────────────── */ .site-footer { background: var(--grad-footer); color: var(--muted); border-top: 1px solid var(--line); } .footer-grid { display: grid; gap: 34px; grid-template-columns: 1fr; padding: 62px 22px 34px; } .brand--footer .brand-mark { background: var(--grad-brand); color: #fff; } .footer-baseline { color: var(--muted); max-width: 260px; margin-top: 14px; font-size: .933rem; } /* ≈ 14px (-2px) */ .footer-col h3 { color: var(--ink); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; font-weight: 600; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 11px; } .footer-col ul a { font-size: 1rem; } /* liens Services / Cabinet : -1px */ .footer-col a { color: var(--ink-2); } .footer-col a:hover { color: var(--red); } .footer-col address { font-style: normal; line-height: 1.95; color: var(--muted); } .footer-col address a { color: var(--ink); } .footer-address { font-size: .85rem; line-height: 1.7; } .acad-split { gap: 44px; align-items: stretch; } .acad-pitch { display: flex; flex-direction: column; justify-content: center; } .acad-pitch .lead { margin-bottom: 28px; } .acad-perks { display: flex; flex-direction: column; border: 0.5px solid var(--line); border-radius: var(--r); overflow: hidden; } .acad-perk { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-bottom: 0.5px solid var(--line); } .acad-perk:last-child { border-bottom: none; } .acad-perk-num { width: 28px; min-width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; margin-top: 1px; } .acad-perk strong { display: block; color: var(--ink); font-size: .9rem; margin-bottom: 2px; } .acad-perk div span { font-size: .8rem; color: var(--muted); line-height: 1.4; } .acad-form-card { padding: 0 !important; overflow: hidden; } .acad-form-head { background: var(--navy); padding: 22px 28px 20px; } .acad-form-head-title { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .acad-form-head h3 { color: #fff; margin: 0; font-size: 1.05rem; } .acad-form-head p { color: rgba(255,255,255,.55); margin: 0; font-size: .8rem; letter-spacing: .01em; } .acad-form-body { padding: 24px 28px; } .acad-quote { margin: 20px 0 0; padding: 18px 20px; background: var(--card); border: 0.5px solid var(--line); border-radius: var(--r); border-left: 3px solid var(--red); } .acad-quote blockquote { font-style: italic; color: var(--ink-2); font-size: .88rem; line-height: 1.65; margin: 0 0 14px; } .acad-quote figcaption { display: flex; align-items: center; gap: 10px; margin: 0; } .acad-quote-avatar { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; } .acad-quote figcaption strong { display: block; font-size: .83rem; color: var(--ink); margin-bottom: 1px; } .acad-quote figcaption span { font-size: .75rem; color: var(--muted); } .linkedin-strip { background: #f0f6ff; border-top: 0.5px solid; border-bottom: 0.5px solid; border-left: 0; border-right: 0; border-image: linear-gradient(90deg, transparent 0%, #0a66c2 20%, #0077b5 55%, #6366f1 90%, transparent 100%) 1; } .linkedin-strip__inner { display: flex; align-items: center; gap: 16px; padding-top: 14px; padding-bottom: 14px; } .linkedin-strip__logo { width: 38px; height: 38px; background: #0a66c2; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .linkedin-strip__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .linkedin-strip__text strong { font-size: .95rem; color: #0a2540; font-weight: 600; } .linkedin-strip__text span { font-size: .8rem; color: #4a5568; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .linkedin-strip__btn { display: inline-flex; align-items: center; gap: 6px; background: #0a66c2; color: #fff; padding: 9px 20px; border-radius: 20px; font-size: .85rem; font-weight: 600; white-space: nowrap; text-decoration: none; flex-shrink: 0; transition: background .2s, transform .15s; } .linkedin-strip__btn:hover { background: #004182; transform: translateY(-1px); } @media (max-width: 600px) { .linkedin-strip__text span { display: none; } .linkedin-strip__text strong { font-size: .88rem; } .linkedin-strip__btn { padding: 8px 14px; font-size: .8rem; } } .footer-bottom { border-top: 1px solid var(--line); padding: 20px 0; font-size: .85rem; color: var(--muted); } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer-bottom-inner p { margin: 0; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; cursor: pointer; color: var(--ink-2); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-pill); transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .theme-toggle:hover { color: var(--navy); border-color: var(--line-hover); background: var(--surface); transform: translateY(-1px); } .tt-wrap { position: relative; display: block; width: 18px; height: 18px; } .tt-sun, .tt-moon { position: absolute; inset: 0; width: 18px; height: 18px; transition: opacity .38s ease, transform .42s cubic-bezier(.34,1.56,.64,1); } .tt-sun { opacity: 0; transform: rotate(90deg) scale(.5); } .tt-moon { opacity: 1; transform: rotate(0deg) scale(1); } :root[data-theme="dark"] .tt-sun { opacity: 1; transform: rotate(0deg) scale(1); } :root[data-theme="dark"] .tt-moon { opacity: 0; transform: rotate(-90deg) scale(.5); } @keyframes tt-pulse { 0%,100%{transform:scale(1)} 40%{transform:scale(.82)} } .theme-toggle.is-switching { animation: tt-pulse .38s ease; } /* ========================================================================= Responsive ========================================================================= */ @media (min-width: 720px) { .field-row { grid-template-columns: 1fr 1fr; } .cards { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .benefits { grid-template-columns: 1fr 1fr; } } @media (min-width: 980px) { .section { padding: 94px 0; } .cards { grid-template-columns: repeat(3, 1fr); } .cards.cards-2 { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(4, 1fr); } .split { grid-template-columns: 1.05fr .95fr; } .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } } /* Menu horizontal : 3 liens + actions. Apparaît dès qu'il y a la place. */ @media (min-width: 1024px) { .nav-toggle { display: none; } .main-nav { position: static; transform: none; border: 0; padding: 0; inset: auto; background: none; display: flex; align-items: center; gap: 8px; } .nav-links { display: flex; align-items: center; gap: 2px; margin: 0; } .nav-links li a { border: 0; padding: 8px 12px; border-radius: var(--r-xs); font-size: .95rem; } .nav-links li a:hover { background: var(--surface-2); } .nav-more { display: none; } /* À propos / Contact → burger uniquement */ .nav-actions { flex-wrap: nowrap; padding-top: 0; gap: 6px; margin-left: 8px; } .nav-account span { display: inline; } .nav-cta { flex: 0 0 auto; width: auto; margin-left: 4px; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* ========================================================================= Composants additionnels (mise à niveau v0.7) ========================================================================= */ /* ── Liste « ce qui est inclus » (checklist verte) ─────────────────────── */ .incl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px 28px; grid-template-columns: 1fr; } .incl-list li { position: relative; padding-left: 32px; color: var(--ink-2); line-height: 1.55; } .incl-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: var(--r-pill); background: var(--red-t); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23DB3238' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .incl-list li strong { color: var(--ink); } @media (min-width: 720px) { .incl-list { grid-template-columns: 1fr 1fr; } } /* ── Bande de chiffres clés ────────────────────────────────────────────── */ .stats-band { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; text-align: center; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 18px; } .stat__num { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1; } .stat__num span { color: var(--red); } .stat__label { display: block; margin-top: 10px; color: var(--muted); font-size: .92rem; } @media (min-width: 860px) { .stats-band { grid-template-columns: repeat(4, 1fr); } } /* ── Équipe ────────────────────────────────────────────────────────────── */ .team { display: grid; gap: 18px; grid-template-columns: 1fr; } .team-member { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; text-align: center; transition: border-color .18s var(--ease); } .team-member:hover { border-color: var(--line-hover); } .team-avatar { width: 84px; height: 84px; border-radius: var(--r-pill); margin: 0 auto 16px; display: grid; place-items: center; background: var(--grad-soft); color: var(--red); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; overflow: hidden; } .team-avatar img { width: 100%; height: 100%; object-fit: cover; } .team-avatar svg { width: 34px; height: 34px; } .team-member h3 { margin-bottom: 2px; } .team-role { color: var(--red); font-weight: 600; font-size: .9rem; margin-bottom: 10px; } .team-member p { color: var(--muted); font-size: .94rem; margin: 0; } .team-note { display: flex; align-items: center; gap: 12px; justify-content: center; text-align: left; max-width: 720px; margin: 26px auto 0; padding: 16px 20px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: .94rem; } .team-note svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--red); } @media (min-width: 720px) { .team { grid-template-columns: repeat(3, 1fr); } } /* Tableau d'identité légale (mentions légales) */ .legal-id { list-style: none; margin: .4em 0 0; padding: 0; } .legal-id li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: nowrap; } .legal-id li::before { position: static !important; top: auto !important; left: auto !important; display: block; flex-shrink: 0; align-self: center; } .legal-id li:last-child { border-bottom: 0; } .legal-id dt, .legal-id .k { flex: 0 0 210px; color: var(--muted); font-size: .92rem; } .legal-id .v { flex: 1; color: var(--ink); font-weight: 500; } /* ── Page 404 : liens rapides ──────────────────────────────────────────── */ .e404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 30px; } .e404-links a { font-weight: 600; font-size: .95rem; } /* ── Bandeau cookies (RGPD) ────────────────────────────────────────────── */ #cookie-fade { position: fixed; left: 0; right: 0; bottom: 0; height: 260px; z-index: 199; background: linear-gradient(to bottom, transparent, #fff); pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); } #cookie-fade.is-visible { opacity: 1; } .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -10px 40px rgba(22,35,94,.10); transform: translateY(110%); transition: transform .3s var(--ease); } .cookie-banner.is-visible { transform: translateY(0); } .cookie-banner__inner { max-width: var(--maxw); margin: 0 auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .cookie-banner__lead { display: flex; align-items: flex-start; gap: 12px; } .cookie-banner__icon { flex: 0 0 auto; color: var(--orange); margin-top: 1px; } .cookie-banner__text { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.55; } .cookie-banner__text a { font-weight: 600; } .cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; } @media (min-width: 760px) { .cookie-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; } .cookie-banner__text { max-width: 70ch; } .cookie-banner__actions { flex: 0 0 auto; } } /* ========================================================================= Mise à niveau v0.8 « Expérience » — composants additionnels Même langage visuel (plat, hairlines, accent rouge) : on ajoute juste un relief TRÈS discret au survol et quelques patterns réutilisables. ========================================================================= */ /* ── Relief subtil au survol (cartes interactives) ─────────────────────── */ .card { transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } /* Cartes purement informatives (non cliquables) : pas d'effet de survol */ .no-lift .card, .no-lift .ccard { transition: none; } .no-lift .card:hover, .no-lift .ccard:hover { transform: none; box-shadow: none; border-color: var(--line); background: var(--card); } .step, .team-member, .stat { transition: border-color .18s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); } .step:hover, .team-member:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } /* ── Fil d'Ariane visuel (le JSON-LD existait déjà ; voici le rendu) ────── */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .85rem; color: var(--muted); margin: 0 0 14px; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--red); } .breadcrumb .sep { color: var(--line-hover); } .breadcrumb [aria-current] { color: var(--ink); font-weight: 600; } /* ── Bande de réassurance (icône + libellé), centrée ───────────────────── */ .trust-band { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 34px; } .trust-item { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); font-weight: 600; font-size: .95rem; } .trust-item svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--red); } /* ── Frise de processus (timeline verticale numérotée) ─────────────────── */ .timeline { display: grid; gap: 0; counter-reset: tl; max-width: 760px; margin: 0 auto; } .timeline__item { position: relative; padding: 0 0 30px 60px; } .timeline__item:last-child { padding-bottom: 0; } .timeline__item::before { counter-increment: tl; content: counter(tl); position: absolute; left: 0; top: -2px; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; z-index: 1; } .timeline__item::after { content: ""; position: absolute; left: 18px; top: 40px; bottom: 4px; width: 2px; background: var(--line-2); } .timeline__item:last-child::after { display: none; } .timeline__item h3 { margin: 5px 0 5px; } .timeline__item p { margin: 0; color: var(--muted); } /* ── Grille de fonctionnalités (carte boxée icône + titre + texte) ─────── */ .feature-grid { display: grid; gap: 18px; grid-template-columns: 1fr; } .feature { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); } .feature__ico { width: 44px; height: 44px; border-radius: 12px; background: var(--grad-soft); color: var(--orange-d); display: grid; place-items: center; } .feature__ico svg { width: 22px; height: 22px; } .feature h3 { margin: 0; font-size: 1.06rem; } .feature p { margin: 0; color: var(--muted); font-size: .95rem; } @media (min-width: 720px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } /* ── Témoignages (variante grille statique) ────────────────────────────── */ .testimonials-grid { display: grid; gap: 18px; grid-template-columns: 1fr; } .testimonial { display: flex; flex-direction: column; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; } .testimonial__quote { position: relative; color: var(--ink-2); line-height: 1.6; margin: 0; } .testimonial__stars { display: inline-flex; gap: 2px; color: var(--orange); } .testimonial__stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; } .testimonial__author { display: flex; align-items: center; gap: 12px; margin-top: auto; } .testimonial__avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--r-pill); background: var(--grad-soft); color: var(--red); display: grid; place-items: center; font-weight: 700; letter-spacing: -.02em; } .testimonial__name { font-weight: 600; color: var(--ink); display: block; line-height: 1.3; } .testimonial__role { color: var(--muted); font-size: .85rem; } @media (min-width: 860px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } } /* ── Encadré (callout) ─────────────────────────────────────────────────── */ .callout { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--r-sm); padding: 18px 20px; } .callout--navy { border-left-color: var(--navy); } .callout__ico { flex: 0 0 auto; width: 24px; height: 24px; color: var(--red); } .callout--navy .callout__ico { color: var(--ink); } .callout p { margin: 0; color: var(--ink-2); } .callout strong { color: var(--ink); } .callout--info { border-left-color: var(--navy); background: rgba(22,35,94,.06); display:block; } .callout--info a { color: var(--navy); font-weight: 600; } /* ── État vide soigné ──────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 46px 24px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface); } .empty-state__ico { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 15px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; color: var(--red); } .empty-state__ico svg { width: 26px; height: 26px; } .empty-state h3 { margin: 0 0 6px; } .empty-state p { color: var(--muted); margin: 0 auto; max-width: 44ch; } .empty-state .btn { margin-top: 18px; } /* ── Toasts (notifications éphémères, file d'attente, accessibles) ─────── */ .toast-stack { position: fixed; top: 80px; right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none; } .toast { display: flex; gap: 11px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--navy); border-radius: var(--r-sm); padding: 13px 14px; box-shadow: var(--shadow-lg); pointer-events: auto; opacity: 0; transform: translateX(18px); transition: opacity .26s var(--ease), transform .26s var(--ease); } .toast.is-in { opacity: 1; transform: none; } .toast.is-out { opacity: 0; transform: translateX(18px); } .toast--ok { border-left-color: var(--ok); } .toast--err { border-left-color: var(--red); } .toast--info{ border-left-color: var(--navy); } .toast__ico { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--ink); } .toast--ok .toast__ico { color: var(--ok); } .toast--err .toast__ico { color: var(--red); } .toast__ico svg { width: 20px; height: 20px; } .toast__body { min-width: 0; flex: 1; } .toast__title { font-weight: 600; color: var(--ink); font-size: .95rem; line-height: 1.3; } .toast__msg { color: var(--muted); font-size: .88rem; margin-top: 1px; } .toast__close { flex: 0 0 auto; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 6px; line-height: 0; transition: color .15s var(--ease), background .15s var(--ease); } .toast__close:hover { color: var(--ink); background: var(--surface-2); } .toast__close svg { width: 15px; height: 15px; } /* ── Squelette de chargement (shimmer) ─────────────────────────────────── */ .skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: shimmer 1.3s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } html[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); } /* ── Utilitaires skeleton ─────────────────────────────────────────────── */ .sk-line { height: 13px; border-radius: 7px; margin-bottom: 10px; } .sk-line--sm { height: 10px; } .sk-line--lg { height: 20px; margin-bottom: 14px; } .sk-line--half { width: 50%; } .sk-line--two-third { width: 66%; } .sk-line--third { width: 33%; } /* Skeleton : cartes boutique */ .sk-course-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; } .sk-course-card__img { height: 130px; border-radius: 0; } .sk-course-card__body { padding: 18px 22px 22px; display: flex; flex-direction: column; } /* Skeleton : bloc tableau générique (EC + admin) */ .sk-table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .sk-table-row { display: grid; grid-template-columns: 2fr 1fr 1fr 80px; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); align-items: center; } .sk-table-row:last-child { border-bottom: 0; } /* Skeleton : stat cards (EC dashboard) */ .sk-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 20px; } @media (min-width:640px) { .sk-stats { grid-template-columns: repeat(4,1fr); } } .sk-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .sk-stat__ico { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; } /* Fade-in du contenu rechargé */ @keyframes skFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .sk-fade-in > * { animation: skFadeIn .22s cubic-bezier(.22,.61,.36,1) both; } /* ── Aide de champ (sous le label) ─────────────────────────────────────── */ .field-hint { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; margin: -3px 0 8px; line-height: 1.4; } /* ── Liste de bénéfices à coches (compacte, pour formulaires/asides) ────── */ .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .check-list li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: .95rem; } .check-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: var(--r-pill); background: var(--red-t); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23DB3238' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* ── Utilitaires de section ────────────────────────────────────────────── */ .section--tight { padding: 52px 0; } .btn-block { width: 100%; } .center-narrow { max-width: 760px; margin-left: auto; margin-right: auto; } .mt-1 { margin-top: 14px; } /* ========================================================================= Glassmorphism — surfaces FLOTTANTES uniquement (dropdowns, toasts, bannière cookies). Placé en fin de feuille pour primer sur les fonds opaques de base. Repli solide (var(--card)) si backdrop-filter non supporté. ========================================================================= */ @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .cs-menu, .toast, .cookie-banner { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); } } /* ========================================================================= Double authentification (espace client) — mise en page soignée & thémable (remplace les styles inline ; QR sur fond toujours blanc pour rester scannable). ========================================================================= */ .twofa-setup { max-width: 680px; } .twofa-steps { list-style: none; counter-reset: tf; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; } .twofa-steps li { counter-increment: tf; position: relative; padding-left: 44px; display: flex; align-items: center; min-height: 30px; color: var(--ink-2); font-size: .96rem; line-height: 1.5; } .twofa-steps li::before { content: counter(tf); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--navy); color: #fff; font-weight: 700; font-size: .9rem; } .twofa-grid { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; } @media (max-width: 600px) { .twofa-grid { grid-template-columns: 1fr; justify-items: center; } } .twofa-qr__frame { width: 196px; height: 196px; padding: 12px; border-radius: var(--r); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); } .twofa-qr__frame svg, .twofa-qr__frame img { width: 100%; height: 100%; display: block; } .twofa-qr__cap { margin: 10px 0 0; text-align: center; font-size: .8rem; color: var(--muted); } .twofa-block + .twofa-block { margin-top: 20px; } .twofa-label { font-weight: 600; font-size: .9rem; color: var(--ink); margin: 0 0 8px; } .twofa-hint { font-size: .82rem; color: var(--muted); margin: 0 0 10px; line-height: 1.5; } .twofa-key { display: flex; align-items: stretch; gap: 8px; } .twofa-key code { flex: 1; min-width: 0; display: flex; align-items: center; word-break: break-all; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; font-size: .92rem; letter-spacing: .08em; color: var(--ink); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .twofa-copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font-weight: 600; font-size: .85rem; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .twofa-copy:hover { background: var(--surface); border-color: var(--line-hover); color: var(--navy); } .twofa-copy svg { width: 15px; height: 15px; } .twofa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .twofa-codes code { background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 10px 8px; font-size: .92rem; text-align: center; letter-spacing: .04em; color: var(--ink); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .twofa-divider { border: 0; border-top: 1px solid var(--line); margin: 24px 0; } .twofa-code-input { letter-spacing: .55em; text-align: center; font-size: 1.3rem; font-weight: 600; padding-left: .55em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .twofa-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; } /* Bandeau de statut (activée / désactivée) */ .twofa-status { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--r-sm); margin: 0 0 18px; color: var(--ink-2); } .twofa-status__ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center; color: #fff; } .twofa-status__ico svg { width: 19px; height: 19px; } .twofa-status strong { display: block; color: var(--ink); } .twofa-status--on { background: rgba(17,144,103,.12); } .twofa-status--on .twofa-status__ico { background: var(--ok); } .twofa-status--off { background: var(--surface); } .twofa-status--off .twofa-status__ico { background: var(--navy); } /* ── Hero de page (fond marine, sans visuel payslip : Contact…) ────────── */ .hero-banner { background: var(--navy); padding: 72px 0 80px; text-align: center; position: relative; overflow: hidden; } .hero-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(100,140,255,.16) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 90% 80%, rgba(219,50,56,.10), transparent 70%); pointer-events: none; } .hero-banner > .container { position: relative; z-index: 1; } .hero-banner h1 { color: #fff; max-width: none; } .hero-banner .eyebrow { color: rgba(255,255,255,.65); } .hero-banner .lead { color: rgba(255,255,255,.78); max-width: 560px; margin: .8rem auto 0; } .hero-contact-links { display: flex; justify-content: center; gap: 28px; margin-top: 36px; flex-wrap: wrap; } .hero-contact-link { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 600; transition: opacity var(--t-fast); } .hero-contact-link:hover { color: #fff; opacity: .78; } .hero-contact-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .hero-contact-icon svg { width: 18px; height: 18px; } /* ── Bande de réassurance géographique (fine, entre hero et contenu) ─────── */ .section--strip { background: transparent; padding: 12px 0; border-bottom: .5px solid rgba(0,0,0,.08); } /* ── Carte "alternative" (fond légèrement teinté marine) ────────────────── */ .form-card--alt { background: linear-gradient(135deg, rgba(22,35,94,.04) 0%, rgba(22,35,94,.08) 100%); border-color: rgba(22,35,94,.15); } .form-card--alt .eyebrow { color: var(--navy); } /* ── Feature grid : variante 4 colonnes ─────────────────────────────────── */ @media (min-width: 980px) { .feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } } /* ── Callout--accent : gradient sur tokens (sans couleur hardcodée) ─────── */ .callout--accent { background: linear-gradient(135deg, var(--navy) 0%, #162f7a 100%); } /* ── Champ obligatoire (*) ───────────────────────────────────────────────── */ .req { color: var(--red); } /* ── LOT 15 — radio-group ───────────────────────────────────────────────── */ .radio-group{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px} .radio-group label{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:400} /* Toggle pill group — segmented control avec fond */ .toggle-group{display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm)} .toggle-opt{display:inline-flex;cursor:pointer;flex:1 0 auto;margin:0!important} .toggle-opt input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none} .toggle-opt span{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:8px 14px;border:1px solid transparent;border-radius:8px;font-size:.875rem;font-weight:500;color:var(--muted);background:transparent;transition:border-color .14s,background .14s,color .14s,box-shadow .14s;user-select:none;white-space:nowrap;line-height:1.3} .toggle-opt input:checked+span{border-color:var(--line);background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 4px rgba(22,35,94,.09)} .toggle-opt:hover span{background:rgba(22,35,94,.05);color:var(--ink-2)} .toggle-opt input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px} /* ── LOT 15 — callout accent ────────────────────────────────────────────── */ .callout--accent{background:linear-gradient(135deg,var(--navy) 0%,#1a3a7a 100%);color:#fff;border:none;border-radius:var(--r);padding:36px 40px} .callout--accent p{color:rgba(255,255,255,.85)} .callout--accent strong{color:#fff} .callout--accent .muted{color:rgba(255,255,255,.75)} .callout--accent h2,.callout--accent h3{color:#fff;margin:6px 0 10px} .callout--accent .eyebrow{color:rgba(255,255,255,.6);letter-spacing:.1em} /* Bande d'annonce Pack Starter — fixe au-dessus du header (retour client n°2) */ :root{--promo-h:40px} .promo-band{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--promo-h);display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,#DB3238 0%,#ef5a2a 55%,#f7941d 100%);padding:0 18px;box-shadow:0 2px 10px rgba(219,50,56,.20)} /* Décale le header sticky et le contenu tant que la bande est affichée */ body.has-promo{padding-top:var(--promo-h)} body.has-promo .site-header{top:var(--promo-h)} .promo-band__marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)} .promo-band__track{display:inline-flex;white-space:nowrap;will-change:transform;animation:promo-scroll 48s linear infinite} .promo-band__msg{padding-right:3rem;font-size:.92rem;font-weight:600;color:#fff} .promo-band:hover .promo-band__track{animation-play-state:paused} .promo-band__cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;background:#fff;color:#111;font-size:.76rem;font-weight:700;padding:5px 12px;border-radius:999px;text-decoration:none;white-space:nowrap;box-shadow:0 2px 8px rgba(16,35,94,.18);transition:box-shadow .15s} .promo-band__cta:hover{color:#111;box-shadow:0 4px 12px rgba(16,35,94,.28);transform:none} .promo-band__close{flex:0 0 auto;background:none;border:0;color:rgba(255,255,255,.8);font-size:1.4rem;line-height:1;cursor:pointer;padding:0 2px} .promo-band__close:hover{color:#fff} @keyframes promo-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Section « L'alliance de deux expertes » (À propos) */ .founders{display:grid;grid-template-columns:1fr;gap:32px;align-items:center} @media (min-width:820px){.founders{grid-template-columns:minmax(0,340px) 1fr;gap:48px}} .founders__photo img{width:100%;height:auto;border-radius:var(--r);display:block;box-shadow:var(--shadow,0 10px 30px rgba(16,35,94,.12))} .founders__ph{aspect-ratio:4/5;border:2px dashed var(--line);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);background:#fff} .founders__ph svg{width:34px;height:34px;opacity:.5} .founders__ph span{font-size:.85rem;font-weight:600} .founders__text h2{margin:6px 0 8px} .founders__names{color:var(--red);font-size:1.02rem;margin:0 0 14px} .founders__names strong{color:var(--navy)} @media (max-width:640px){.promo-band__cta span{display:none}.promo-band__msg{font-size:.82rem}} @media (prefers-reduced-motion:reduce){.promo-band__track{animation:none;transform:none}.promo-band__msg+.promo-band__msg{display:none}} /* Pack Starter — layout 2 colonnes */ .starter-card{display:flex;gap:48px;align-items:center;max-width:780px;margin:0 auto} .starter-left{flex:1;min-width:0} .starter-right{flex:0 0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:186px} .starter-tagline{font-size:.97rem;margin:0 0 18px;color:rgba(255,255,255,.8)} .starter-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .starter-list li{display:flex;align-items:center;gap:9px;font-size:.9rem;color:rgba(255,255,255,.85)} .starter-list li svg{width:13px;height:13px;flex:0 0 auto;color:rgba(255,255,255,.6);stroke-width:2.5} .starter-divider{width:1px;background:rgba(255,255,255,.12);align-self:stretch} .starter-price{font-size:2.6rem;font-weight:800;color:#fff;margin:0;line-height:1.05;letter-spacing:-.03em} .starter-price span{font-size:1rem;font-weight:400;opacity:.6} .starter-note{font-size:.73rem;color:rgba(255,255,255,.4);margin:0;line-height:1.5} .btn-white{background:#fff;color:var(--navy);border:none;font-weight:600;white-space:nowrap} .btn-white:hover{background:rgba(255,255,255,.9);color:var(--navy);transform:translateY(-1px)} @media(max-width:640px){ .starter-card{flex-direction:column;gap:24px;padding:28px 22px} .starter-right{width:100%;border-top:1px solid rgba(255,255,255,.12);padding-top:24px} .starter-divider{display:none} } /* LOT 12-13 — Espace client tabs */ .client-tab{display:inline-block;padding:6px 14px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:.9rem;transition:background .15s} .client-tab:hover{background:var(--card-2)} .client-tab--active{background:var(--navy);color:#fff;font-weight:600} /* Grille variables de paie */ .payroll-grid{width:100%;border-collapse:collapse;font-size:.9rem} .payroll-grid th,.payroll-grid td{padding:8px 10px;border:1px solid var(--line);white-space:nowrap} .payroll-grid th{background:var(--card-2);font-weight:600;position:sticky;top:0} .payroll-grid td input[type=number],.payroll-grid td input[type=text]{width:90px;padding:4px 6px;border:1px solid var(--line);border-radius:4px;background:var(--card)} .payroll-grid-wrap{overflow-x:auto} /* LOT 16 — Panier enrichi */ .form-section{background:var(--card);border:1px solid var(--border,var(--line));border-radius:10px;padding:20px 24px;margin-bottom:20px} .form-section h3{margin:0 0 8px;font-size:1rem} .field-hint{display:block;font-size:.8rem;margin-top:3px} .participant-row{border:1px solid var(--border,var(--line));border-radius:6px;padding:12px;margin-bottom:10px;background:var(--card-2)} /* ═══════════════════════════════════════════════════════════════ ESPACE CLIENT — Design system "Canney" light ═══════════════════════════════════════════════════════════════ */ /* ── Tokens ── */ .ec-shell{ --ec-bg: #f3f5fb; --ec-card: #ffffff; --ec-card2: #f8fafd; --ec-border: rgba(0,0,0,.06); --ec-shadow: 0 1px 3px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.05); --ec-shadow-lg:0 4px 6px rgba(0,0,0,.04),0 12px 28px rgba(0,0,0,.09); --ec-r: 18px; --ec-r-sm: 12px; --ec-sidebar: 260px; --ec-navy: #16235e; --ec-accent: #db3238; --ec-ink: #16235e; --ec-muted: #7b849a; } /* ── Shell ── */ .ec-shell{ display:flex;flex-direction:column;min-height:100vh; background:var(--ec-bg); font-family:inherit; } .ec-body{display:flex;flex:1;min-height:0} /* ── Topbar breadcrumb ── */ .ec-topbar{ display:flex;align-items:center;justify-content:space-between; padding:9px 20px 9px 20px; border-bottom:1px solid var(--ec-border); background:var(--ec-bg); flex-shrink:0; } .ec-breadcrumb{ display:flex;align-items:center;gap:7px; font-size:.78rem;color:var(--ec-muted); list-style:none;margin:0;padding:0;flex-wrap:wrap; } .ec-breadcrumb a{color:var(--ec-ink);font-weight:600;text-decoration:none} .ec-breadcrumb a:hover{text-decoration:underline} .ec-breadcrumb strong{color:var(--ec-ink);font-weight:600} .ec-bc-sep{color:var(--ec-border);opacity:.7;font-size:.72rem} .ec-bc-chev{width:14px;height:14px;color:var(--ec-muted);opacity:.5;flex-shrink:0} .ec-breadcrumb span#ec-bc-cat{color:var(--ec-muted);font-weight:500} .ec-topbar__date{font-size:.76rem;color:var(--ec-muted);white-space:nowrap;flex-shrink:0} /* ── EC topbar right cluster ── */ .ec-topbar__right{display:flex;align-items:center;gap:12px} .ec-gs-trigger{display:inline-flex;align-items:center;gap:0;padding:3px 7px 3px 9px;border-radius:999px;border:1px solid #d1d5db;background:#fff;color:#9aa3b2;font-size:.64rem;font:inherit;cursor:pointer;transition:border-color .16s,box-shadow .16s,color .16s;white-space:nowrap;width:152px;box-shadow:0 1px 2px rgba(0,0,0,.05)} .ec-gs-trigger:hover{border-color:var(--ec-accent);box-shadow:0 0 0 3px rgba(219,50,56,.08);color:#374151} .ec-gs-trigger svg{width:12px;height:12px;flex-shrink:0;margin-right:6px;opacity:.6} .ec-gs-trigger>span{flex:1;text-align:left} .ec-gs-trigger kbd{margin-left:auto;font-size:.6rem;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;padding:1px 5px;color:#9ca3af;font-family:inherit;line-height:1.5;flex-shrink:0} /* ── EC hist search with icon ── */ .ec-search-wrap{position:relative;margin-left:auto} .ec-search-ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--ec-muted);pointer-events:none} .ec-search-wrap .ec-hist-search{padding-left:28px;width:180px} /* ── Global search overlay (Raycast-style) ── */ .gs-overlay{position:fixed;inset:0;z-index:2000;background:rgba(15,26,60,.45);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:90px} .gs-overlay[hidden]{display:none} .gs-box{width:min(580px,calc(100vw - 32px));background:#fff;border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.28);overflow:hidden} .gs-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid #eee} .gs-head svg{width:17px;height:17px;color:#9aa3b2;flex-shrink:0} .gs-input{flex:1;border:none;outline:none;font-size:.96rem;background:transparent;color:var(--ec-ink);font:inherit} .gs-input::placeholder{color:#b0b8c8} .gs-esc{font-size:.68rem;color:#9aa3b2;background:#f4f5f8;border:1px solid #e5e7eb;border-radius:5px;padding:2px 6px;flex-shrink:0;font-family:inherit} .gs-body{max-height:400px;overflow-y:auto} .gs-hint{padding:28px;text-align:center;color:#9aa3b2;font-size:.84rem} .gs-group{padding:8px 14px 4px;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9aa3b2} .gs-item{display:flex;align-items:center;gap:11px;padding:9px 14px;cursor:pointer;transition:background .1s} .gs-item:hover,.gs-item.gs-sel{background:#f5f6f7} .gs-ico{width:30px;height:30px;border-radius:8px;background:#f0f1f3;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ec-muted)} .gs-ico svg{width:15px;height:15px} .gs-ico--emp{background:#fef4f4;color:var(--ec-accent)} .gs-lbl{font-size:.86rem;font-weight:600;color:var(--ec-ink);line-height:1.2} .gs-sub{font-size:.73rem;color:#9aa3b2;margin-top:1px} .gs-hint-enter{margin-left:auto;font-size:.7rem;color:#b0b8c8;background:#f4f5f8;border-radius:5px;padding:2px 6px;flex-shrink:0} /* ── Cart panel (right slide-in) ── */ .cart-panel{position:fixed;top:0;right:0;bottom:0;z-index:1500;width:min(360px,100vw);background:#fff;box-shadow:-4px 0 32px rgba(0,0,0,.14);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1)} .cart-panel.is-open{transform:translateX(0)} .cart-panel-bd{position:fixed;inset:0;z-index:1499;background:rgba(15,26,60,.28);opacity:0;transition:opacity .26s;pointer-events:none} .cart-panel-bd.is-open{opacity:1;pointer-events:auto} .cp-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--ec-border)} .cp-head h3{margin:0;font-size:.96rem;font-weight:700;color:var(--ec-ink);display:flex;align-items:center;gap:7px} .cp-close{width:28px;height:28px;border-radius:7px;border:none;background:var(--ec-bg);color:var(--ec-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:background .14s} .cp-close:hover{background:var(--ec-border)} .cp-body{flex:1;overflow-y:auto;padding:12px 20px} .cp-foot{padding:14px 20px;border-top:1px solid var(--ec-border)} .cp-item{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--ec-border)} .cp-item:last-child{border-bottom:none} .cp-item__ico{width:34px;height:34px;border-radius:8px;background:var(--ec-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ec-muted)} .cp-item__ico svg{width:17px;height:17px} .cp-item__name{flex:1;font-size:.82rem;font-weight:600;color:var(--ec-ink);line-height:1.35} .cp-item__price{font-size:.82rem;font-weight:700;color:var(--ec-ink);flex-shrink:0} .cp-item__meta{font-size:.72rem;color:var(--ec-muted);margin-top:2px} .cp-total{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-weight:700;color:var(--ec-ink);font-size:.92rem;padding-top:4px} .cp-empty{text-align:center;padding:40px 0 32px;color:var(--ec-muted)} .cp-empty svg{width:36px;height:36px;margin:0 auto 10px;display:block;opacity:.3} .cp-empty p{margin:0;font-size:.84rem} /* ── Custom Date Picker ── */ .ctp-dp{position:relative;display:block} .ctp-dp-display{width:100%;padding:9px 12px 9px 36px;border:1px solid var(--ec-border);border-radius:10px;background:var(--ec-bg);font:inherit;font-size:.85rem;color:var(--ec-ink);cursor:pointer;caret-color:transparent;transition:border-color .15s;box-sizing:border-box} .ctp-dp-display:focus{outline:none;border-color:var(--ec-accent)} .ctp-dp-display::placeholder{color:var(--ec-muted);opacity:.7} .ctp-dp-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ec-muted);pointer-events:none} .ctp-dp-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:400;background:#fff;border:1px solid var(--ec-border);border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.13);padding:14px 14px 10px;min-width:264px;animation:dpFadeIn .12s ease} @keyframes dpFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .ctp-dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:4px} .ctp-dp-nav{width:28px;height:28px;border-radius:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ec-muted);transition:background .1s,color .1s;font-size:1rem;flex-shrink:0} .ctp-dp-nav:hover{background:var(--ec-border);color:var(--ec-ink)} .ctp-dp-month-lbl{font-size:.84rem;font-weight:700;color:var(--ec-ink);flex:1;text-align:center} .ctp-dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:3px} .ctp-dp-wd{font-size:.65rem;font-weight:700;text-align:center;color:var(--ec-muted);padding:3px 0;letter-spacing:.04em} .ctp-dp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .ctp-dp-day{width:34px;height:32px;border-radius:7px;border:none;background:none;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ec-ink);transition:background .1s,color .1s;font-family:inherit} .ctp-dp-day:hover:not(:disabled){background:var(--ec-border)} .ctp-dp-day--other{color:var(--ec-muted);opacity:.35} .ctp-dp-day--today{font-weight:800;color:var(--ec-accent)} .ctp-dp-day--sel{background:var(--ec-accent)!important;color:#fff!important;border-radius:7px} .ctp-dp-day--today.ctp-dp-day--sel{background:var(--ec-accent)!important;color:#fff!important} .ctp-dp-foot{display:flex;justify-content:space-between;margin-top:8px;border-top:1px solid var(--ec-border);padding-top:8px} .ctp-dp-action{font-size:.73rem;color:var(--ec-muted);background:none;border:none;cursor:pointer;padding:3px 7px;border-radius:6px;transition:background .1s,color .1s;font-family:inherit} .ctp-dp-action:hover{background:var(--ec-border);color:var(--ec-ink)} .ctp-dp-today-btn{color:var(--ec-accent);font-weight:600} /* ── Header compact (espace client uniquement) ── */ body:has(.ec-shell) .site-header .header-inner{height:46px;max-width:none;padding:0 20px;margin:0} body:has(.ec-shell) .brand-logo{height:24px} body:has(.ec-shell) .nav-links li a{font-size:.84rem;padding:5px 9px} body:has(.ec-shell) .nav-icon{width:30px;height:30px} body:has(.ec-shell) .nav-icon svg{width:16px;height:16px} body:has(.ec-shell) .nav-account{font-size:.82rem;padding:6px 5px} body:has(.ec-shell) .nav-account svg{width:15px;height:15px} body:has(.ec-shell) .nav-cta .btn{padding:6px 14px;font-size:.82rem;border-radius:9px} body:has(.ec-shell) .cart-badge{top:1px;right:0;min-width:14px;height:14px;font-size:.58rem} body:has(.ec-shell) .nav-cta{display:none} body:has(.ec-shell) .nav-account{display:none} body:has(.ec-shell) .site-header{z-index:300} /* ── Sidebar ── */ .ec-sidebar{ width:var(--ec-sidebar);flex:0 0 var(--ec-sidebar); background:var(--ec-card); box-shadow:none; display:flex;flex-direction:column; position:fixed;top:47px;left:0;bottom:0;z-index:200; transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1); overflow-y:auto;overflow-x:hidden; } @media(min-width:900px){ .ec-sidebar{ transform:none;position:sticky;top:58px; height:auto;flex-shrink:0;align-self:flex-start; border-radius:18px;border:1px solid var(--ec-border); box-shadow:none;margin:12px 0 12px 12px; max-height:calc(100vh - 70px);overflow-y:auto; } } .ec-sidebar--open{transform:translateX(0)} .ec-sidebar__inner{display:flex;flex-direction:column;height:auto;padding:14px 0 10px} /* Profile button (sidebar – wraps avatar + name + chevron) */ .ec-profile-btn{ display:flex;align-items:center;gap:10px; padding:8px 10px; margin:4px 8px 0; border:none;background:none;cursor:pointer;text-align:left; border-radius:10px; transition:background .15s; } .ec-profile-btn:hover,.ec-profile-btn[aria-expanded="true"]{background:rgba(0,0,0,.04)} .ec-sidebar__inner > .ec-profile-btn + .ec-nav{border-top:1px solid var(--ec-border);margin-top:8px;padding-top:4px} .ec-avatar{ width:38px;height:38px;border-radius:11px; background:linear-gradient(135deg,var(--ec-navy) 0%,#2d4abf 100%); color:#fff;font-weight:700;font-size:1rem; display:flex;align-items:center;justify-content:center;flex-shrink:0; box-shadow:0 2px 8px rgba(22,35,94,.25); } .ec-avatar--sm{ width:30px;height:30px;border-radius:8px;font-size:.84rem; text-decoration:none; } .ec-profile-btn__info{flex:1;min-width:0} .ec-user-block__name{ font-weight:700;font-size:.88rem; color:var(--ec-ink);line-height:1.25; } .ec-user-block__co{font-size:.73rem;color:var(--ec-muted);margin-top:1px} .ec-user-block__email{font-size:.7rem;color:var(--ec-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ec-profile-chevron{ flex-shrink:0;width:14px;height:14px; color:var(--ec-muted);opacity:.4; transition:transform .2s,opacity .15s; } .ec-profile-btn[aria-expanded="true"] .ec-profile-chevron{transform:rotate(180deg);opacity:.7} /* Floating profile panel */ .ec-profile-panel{ position:fixed;z-index:600; background:var(--ec-card); border:1px solid var(--ec-border); border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.09),0 1px 3px rgba(0,0,0,.05); padding:6px;min-width:210px; } .ec-profile-panel[hidden]{display:none} /* Panel – header */ .ec-pp-header{display:flex;align-items:center;gap:10px;padding:10px 12px 12px} .ec-pp-avatar{ width:36px;height:36px;border-radius:10px;flex-shrink:0; background:linear-gradient(135deg,var(--ec-navy) 0%,#2d4abf 100%); color:#fff;font-weight:700;font-size:.95rem; display:flex;align-items:center;justify-content:center; box-shadow:0 2px 8px rgba(22,35,94,.22); } .ec-pp-info{min-width:0} .ec-pp-name{font-weight:700;font-size:.85rem;color:var(--ec-ink);line-height:1.2} .ec-pp-email{font-size:.72rem;color:var(--ec-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px} /* Panel – separator */ .ec-pp-sep{height:1px;background:var(--ec-border);margin:2px 0} /* Panel – section label */ .ec-pp-group-label{ font-size:.62rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--ec-muted); padding:8px 12px 4px; } /* Panel – links */ .ec-pp-link{ display:flex;align-items:center;gap:10px; padding:8px 10px;border-radius:9px; color:var(--ec-ink);font-size:.84rem;font-weight:500; text-decoration:none;transition:background .12s;margin-bottom:1px; } .ec-pp-link:hover{background:var(--ec-bg)} .ec-pp-link__ico{ width:28px;height:28px;border-radius:8px;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .ec-pp-link__ico svg{width:14px;height:14px} .ec-pp-link__ico--blue{background:rgba(99,102,241,.1);color:#6366f1} .ec-pp-link__ico--green{background:rgba(34,197,94,.1);color:#16a34a} .ec-pp-link--danger{color:var(--ec-muted);font-size:.82rem;margin-top:1px} .ec-pp-link--danger svg{width:14px;height:14px;flex-shrink:0} .ec-pp-link--danger:hover{background:rgba(239,68,68,.07);color:#ef4444} /* Panel – backdrop */ .ec-profile-backdrop{position:fixed;inset:0;z-index:599} .ec-profile-backdrop[hidden]{display:none} /* Nav */ .ec-nav{padding:0 10px;flex:0 0 auto} .ec-nav__group-label{ font-size:.65rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--ec-muted); padding:14px 8px 4px; } .ec-nav__link{ display:flex;align-items:center;gap:9px; padding:8px 10px;border-radius:10px; color:var(--ec-muted);font-size:.84rem;font-weight:500; text-decoration:none;transition:background .15s,color .15s; margin-bottom:1px;position:relative; white-space:nowrap;overflow:hidden; } .ec-nav__link svg{width:15px;height:15px;flex-shrink:0;transition:color .15s} .ec-nav__link:hover{ background:var(--ec-bg);color:var(--ec-ink); } .ec-nav__link--on{ background:linear-gradient(135deg,rgba(219,50,56,.12) 0%,rgba(219,50,56,.06) 100%); color:var(--ec-accent);font-weight:600; } .ec-nav__link--on svg{color:var(--ec-accent)} .ec-nav__link--on::before{ content:'';position:absolute;left:0;top:4px;bottom:4px; width:3px;background:var(--ec-accent);border-radius:0 2px 2px 0; } .ec-nav__badge{ margin-left:auto;font-size:.67rem; background:rgba(123,132,154,.12);color:var(--ec-muted); padding:1px 7px;border-radius:10px;font-weight:600; } .ec-nav__badge--ok{background:rgba(34,197,94,.12);color:#16a34a} /* Logout */ .ec-logout{ display:flex;align-items:center;gap:8px; margin:12px 10px 0;padding:8px 10px;border-radius:10px; color:var(--ec-muted);font-size:.82rem;text-decoration:none; transition:background .15s,color .15s; } .ec-logout svg{width:14px;height:14px} .ec-logout:hover{background:rgba(239,68,68,.08);color:#ef4444} /* ── Mobile bar ── */ .ec-mobile-bar{ display:flex;align-items:center;gap:10px;padding:10px 16px; background:var(--ec-card); box-shadow:0 1px 0 var(--ec-border),0 2px 8px rgba(0,0,0,.04); position:sticky;top:0;z-index:300; } @media(min-width:900px){.ec-mobile-bar{display:none}} .ec-mobile-bar__title{flex:1;font-weight:700;font-size:.9rem;color:var(--ec-ink)} .ec-burger{display:flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:4px;border-radius:6px} .ec-burger span{display:block;width:18px;height:2px;background:var(--ec-ink);border-radius:2px;transition:.2s} .ec-burger--open span:nth-child(1){transform:translateY(6px) rotate(45deg)} .ec-burger--open span:nth-child(2){opacity:0} .ec-burger--open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ── Main ── */ .ec-main{flex:1;min-width:0} .ec-content{padding:24px 16px 64px;max-width:1160px;margin:0 auto} @media(min-width:600px){.ec-content{padding:28px 24px 80px}} @media(min-width:900px){.ec-content{padding:32px 36px 80px}} /* ── Hero banner ── */ .ec-hero{ position:relative;overflow:hidden; background:linear-gradient(118deg,#dbe9fc 0%,#e9e8fb 38%,#f5e6f4 66%,#fce9da 100%); border-radius:var(--ec-r); padding:28px 28px 24px; margin-bottom:20px; border:1px solid rgba(219,50,56,.08); box-shadow:none; } .ec-hero__deco{position:absolute;inset:0;pointer-events:none} .ec-hero__blob{position:absolute;border-radius:50%;opacity:1} .ec-hero__blob--1{ width:260px;height:260px; background:radial-gradient(circle,rgba(247,148,29,.15) 0%,transparent 70%); top:-80px;right:-40px; } .ec-hero__blob--2{ width:180px;height:180px; background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 70%); bottom:-60px;left:30%; } .ec-hero__body{ position:relative;z-index:1; display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:16px; } .ec-hero__eyebrow{ font-size:.72rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#DB3238;margin:0 0 6px; } .ec-hero__h1{ font-size:clamp(1.4rem,3.5vw,1.9rem);font-weight:800; color:#16235e;margin:0 0 8px;letter-spacing:-.025em;line-height:1.15; } .ec-hero__sub{ font-size:.88rem;color:#4a546a;margin:0; display:flex;align-items:center;flex-wrap:wrap;gap:6px; } .ec-hero__sub strong{color:#16235e} .ec-hero__sub .badge{ background:rgba(219,50,56,.09);color:#DB3238; border:1px solid rgba(219,50,56,.18); font-size:.73rem; } .ec-hero__right{ display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0; } .ec-hero__cta{ display:inline-flex;align-items:center;gap:6px; background:linear-gradient(120deg,#eef4fd 0%,#edeafb 45%,#fce9f8 100%); color:#DB3238; font-size:.84rem;font-weight:700; padding:9px 18px;border-radius:10px;text-decoration:none; white-space:nowrap; border:1px solid rgba(255,255,255,.85); box-shadow:0 2px 0 rgba(160,135,210,.35), 0 4px 14px rgba(180,160,220,.18); transition:box-shadow .15s,transform .15s,filter .15s; } .ec-hero__cta svg{width:16px;height:16px;flex:0 0 auto} .ec-hero__cta:hover{box-shadow:0 4px 18px rgba(180,160,220,.28);transform:translateY(-1px);filter:brightness(.97)} .ec-hero__link{ font-size:.78rem;color:#DB3238;font-weight:600; text-decoration:none;transition:color .15s,opacity .15s;opacity:.8; } .ec-hero__link:hover{opacity:1;color:#c01c15} /* ── Stats ── */ .ec-stats{ display:grid;grid-template-columns:repeat(2,1fr);gap:12px; margin-bottom:20px; } @media(min-width:640px){.ec-stats{grid-template-columns:repeat(4,1fr)}} .ec-stat{ background:var(--ec-card);border-radius:var(--ec-r-sm); padding:16px;display:flex;flex-direction:column;gap:12px; box-shadow:none; border:1px solid var(--ec-border); transition:transform .2s;position:relative;overflow:hidden; } .ec-stat:hover{box-shadow:none;transform:translateY(-2px)} .ec-stat__ico{ width:42px;height:42px;border-radius:12px; display:flex;align-items:center;justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.1); } .ec-stat__ico svg{width:20px;height:20px} .ec-stat--paie .ec-stat__ico{background:linear-gradient(135deg,#818cf8,#6366f1);color:#fff} .ec-stat--rh .ec-stat__ico{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff} .ec-stat--docs .ec-stat__ico{background:linear-gradient(135deg,#34d399,#10b981);color:#fff} .ec-stat--form .ec-stat__ico{background:linear-gradient(135deg,#f87171,#ef4444);color:#fff} .ec-stat__val{font-size:1.25rem;font-weight:800;color:var(--ec-ink);letter-spacing:-.02em;line-height:1} .ec-stat__lbl{font-size:.73rem;color:var(--ec-muted);margin-top:2px} .ec-stat__link{ position:absolute;top:12px;right:12px; width:22px;height:22px;border-radius:6px; background:var(--ec-bg);color:var(--ec-muted); display:flex;align-items:center;justify-content:center; font-size:.75rem;text-decoration:none;opacity:0;transition:opacity .15s; } .ec-stat:hover .ec-stat__link{opacity:1} /* ── Section title ── */ .ec-section-title{ font-size:.72rem;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--ec-muted); margin:48px 0 16px; padding-top:36px; border-top:1px solid var(--ec-border); display:flex;align-items:center;gap:10px; } .ec-section-title::after{content:none} /* première section-title juste après les stats : pas de double séparateur */ .ec-stats + .ec-section-title{margin-top:36px;padding-top:28px} /* ── Action cards ── */ .ec-actions{ display:grid;gap:14px; grid-template-columns:1fr; margin-bottom:8px; } @media(min-width:580px){.ec-actions{grid-template-columns:1fr 1fr}} @media(min-width:900px){.ec-actions{grid-template-columns:2fr 1fr 1fr}} .ec-action-card{ background:var(--ec-card); border-radius:var(--ec-r); border:1px solid var(--ec-border); box-shadow:none; padding:22px; display:flex;flex-direction:column; transition:none; } .ec-action-card:hover{box-shadow:none} .ec-action-card--primary{ background:var(--ec-card); border-color:rgba(99,102,241,.2); } /* Card sub-elements */ .ec-ac-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .ec-ac-ico{ width:44px;height:44px;border-radius:13px; background:var(--ic-bg,rgba(99,102,241,.1)); color:var(--ic-c,#6366f1); display:flex;align-items:center;justify-content:center; box-shadow:none; } .ec-ac-ico svg{width:21px;height:21px} .ec-ac-title{font-size:.95rem;font-weight:700;color:var(--ec-ink);margin:0 0 6px} .ec-ac-desc{font-size:.83rem;color:var(--ec-muted);flex:1;margin:0 0 16px;line-height:1.5} .ec-ac-foot{margin-top:auto} /* Status pills */ .ec-status-pill{ display:inline-flex;align-items:center;gap:5px; font-size:.7rem;font-weight:700; padding:3px 9px;border-radius:20px;letter-spacing:.02em; } .ec-status-pill::before{content:'';width:5px;height:5px;border-radius:50%} .ec-status-pill--ok{background:rgba(34,197,94,.12);color:#16a34a} .ec-status-pill--ok::before{background:#22c55e} .ec-status-pill--warn{background:rgba(99,102,241,.1);color:#6366f1} .ec-status-pill--warn::before{background:#6366f1} .ec-status-pill--neutral{background:rgba(245,158,11,.1);color:#d97706} .ec-status-pill--neutral::before{background:#f59e0b} /* Upload zone */ .ec-upload-form{display:flex;flex-direction:column;gap:8px;flex:1} .ec-upload-select{ width:100%;padding:7px 10px;font-size:.83rem; background:var(--ec-bg);border:1px solid var(--ec-border); border-radius:8px;color:var(--ec-ink); appearance:none;cursor:pointer; } .ec-upload-zone{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; border:1.5px dashed rgba(0,0,0,.12);border-radius:10px; padding:18px 12px;cursor:pointer;text-align:center; background:var(--ec-bg);transition:border-color .15s,background .15s; flex:1; } .ec-upload-zone:hover{border-color:var(--ec-accent);background:rgba(219,50,56,.03)} .ec-upload-zone--picked{border-color:#22c55e;background:rgba(34,197,94,.04)} .ec-upload-zone.dragover{border-color:var(--ec-accent);background:rgba(219,50,56,.04);border-style:solid} .ec-upload-zone input[type=file]{position:absolute;opacity:0;width:0;height:0} .ec-upload-zone svg{width:24px;height:24px;color:var(--ec-muted);margin-bottom:2px;transition:color .15s} .ec-upload-zone:hover svg{color:var(--ec-accent)} .ec-upload-zone--picked svg{color:#22c55e} #uz-text{font-size:.82rem;font-weight:600;color:var(--ec-ink)} .ec-upload-zone small{font-size:.72rem;color:var(--ec-muted)} /* RH nav links */ .ec-rh-nav{display:flex;flex-direction:column;gap:4px;flex:1} .ec-rh-item{ display:flex;align-items:center;gap:9px; padding:9px 11px;border-radius:9px; background:var(--ec-bg);color:var(--ec-ink); font-size:.83rem;font-weight:500;text-decoration:none; transition:background .15s,transform .1s; border:1px solid transparent; } .ec-rh-item:hover{background:var(--ec-card2);border-color:var(--ec-border);transform:translateX(2px)} .ec-rh-item__dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .ec-rh-item__count{ font-size:.71rem;background:rgba(0,0,0,.06); padding:1px 6px;border-radius:10px;color:var(--ec-muted);font-weight:600; } .ec-rh-item__arr{margin-left:auto;color:var(--ec-muted);font-size:.85rem;opacity:0;transition:opacity .15s} .ec-rh-item:hover .ec-rh-item__arr{opacity:1} /* ── Live cards ── */ .ec-live-cards{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:8px} @media(min-width:600px){.ec-live-cards{grid-template-columns:repeat(2,1fr)}} .ec-live-card{ background:var(--ec-card);border-radius:var(--ec-r-sm); border:1px solid var(--ec-border);box-shadow:none; padding:20px;position:relative; } .ec-live-card__badge{ position:absolute;top:14px;right:14px; background:var(--ec-accent);color:#fff; font-size:.68rem;font-weight:700;padding:3px 9px; border-radius:10px;text-transform:uppercase;letter-spacing:.05em; } .ec-live-card h3{margin:0 0 4px;font-size:.94rem;padding-right:64px;color:var(--ec-ink)} /* ── Period + tables section ── */ .ec-table-card{ background:var(--ec-card);border-radius:var(--ec-r-sm); border:1px solid var(--ec-border);box-shadow:none; overflow:hidden;margin-bottom:8px; } .ec-table-card .table-wrap{margin:0} .ec-table-card .matrix{border:none} .ec-table-card .matrix th{background:var(--ec-bg);border-color:var(--ec-border)} .ec-table-card .matrix td{border-color:var(--ec-border)} /* Account / 2FA cards */ .form-card,.twofa-setup{ background:var(--ec-card) !important; border-radius:var(--ec-r-sm) !important; border:1px solid var(--ec-border) !important; box-shadow:none !important; } /* Period pill (hero) */ .ec-period-pill{ display:inline-flex;align-items:center;gap:6px; background:rgba(255,255,255,.15);color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:20px;padding:5px 12px;font-size:.82rem;font-weight:600; } .ec-period-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--c,#94a3b8)} /* Sidebar mobile overlay */ @media(max-width:899px){ .ec-sidebar--open::before{ content:'';position:fixed;inset:0;background:rgba(16,23,46,.4); backdrop-filter:blur(2px);z-index:-1; } } /* Wave / Coucou */ .ec-wave{display:inline-block;vertical-align:middle;margin-left:4px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.12));animation:ec-wave-anim 2.4s ease-in-out .6s 3} .ec-wave svg{display:block} .ec-wave .hw-f{transform-box:fill-box;transform-origin:center bottom;animation:ec-curl-anim 2.4s ease-in-out .6s 3} .ec-wave .hw-mp{transform-box:fill-box;transform-origin:center bottom;animation:ec-ph-m 2.4s ease-in-out .6s 3} .ec-wave .hw-dp{transform-box:fill-box;transform-origin:center bottom;animation:ec-ph-d 2.4s ease-in-out .6s 3} @keyframes ec-wave-anim{ 0%,100%{transform:rotate(0deg)} 22%{transform:rotate(-8deg)} 52%{transform:rotate(5deg)} 72%{transform:rotate(0deg)} } @keyframes ec-curl-anim{ 0%,100%{transform:perspective(250px) rotateX(0deg)} 20%,45%{transform:perspective(250px) rotateX(42deg)} 65%{transform:perspective(250px) rotateX(0deg)} } @keyframes ec-ph-m{ 0%,100%{transform:perspective(200px) rotateX(0deg)} 20%,45%{transform:perspective(200px) rotateX(32deg)} 65%{transform:perspective(200px) rotateX(0deg)} } @keyframes ec-ph-d{ 0%,100%{transform:perspective(150px) rotateX(0deg)} 22%,45%{transform:perspective(150px) rotateX(40deg)} 65%{transform:perspective(150px) rotateX(0deg)} } /* Misc */ .ec-count{ font-size:.71rem;background:rgba(0,0,0,.06); padding:1px 6px;border-radius:10px;color:var(--ec-muted);font-weight:600; } /* ── Sub-page headers ─────────────────────────────────────── */ .ec-page-hd{ display:flex;align-items:center;gap:16px; padding:0 0 22px;margin-bottom:28px; border-bottom:1px solid var(--ec-border);flex-wrap:wrap; } .ec-page-hd__ico{ width:46px;height:46px;border-radius:13px;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .ec-page-hd__ico svg{width:22px;height:22px} .ec-page-hd__body{flex:1;min-width:0} .ec-page-hd__title{font-size:1.22rem;font-weight:800;color:var(--ec-ink);margin:0 0 4px;line-height:1.2} .ec-page-hd__sub{font-size:.84rem;color:var(--ec-muted);margin:0;line-height:1.4} .ec-page-hd__act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-shrink:0} .ec-page-hd__act input[type=month]{ padding:6px 10px;border:1px solid var(--ec-border);border-radius:8px; font:inherit;font-size:.85rem;color:var(--ec-ink);background:var(--ec-bg,#fff); } @media(max-width:640px){.ec-page-hd{flex-direction:column;align-items:flex-start}} /* ── Empty states ─────────────────────────────────────────── */ .ec-empty{ display:flex;flex-direction:column;align-items:center;text-align:center; padding:48px 24px;border:1.5px dashed var(--ec-border);border-radius:16px; background:var(--ec-bg,#fafbff); } .ec-empty__ico{ width:52px;height:52px;border-radius:14px; display:flex;align-items:center;justify-content:center;margin-bottom:16px; } .ec-empty__ico svg{width:24px;height:24px} .ec-empty__title{font-size:.97rem;font-weight:700;color:var(--ec-ink);margin:0 0 8px} .ec-empty__text{ font-size:.855rem;color:var(--ec-muted);margin:0 0 20px; max-width:320px;line-height:1.6; } /* ── Fix: callout icon in ec-content ─────────────────────── */ .ec-content .callout{align-items:flex-start;gap:12px} .ec-content .callout svg{width:18px;height:18px;flex-shrink:0;margin-top:2px} /* ── Sub-page 2-col grid ──────────────────────────────────── */ .ec-sub-2{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media(max-width:780px){.ec-sub-2{grid-template-columns:1fr}} /* form + history asymmetric layout */ .ec-sub-2--form{grid-template-columns:min(370px,42%) 1fr;gap:20px;align-items:start} .ec-sub-2--table-wide{grid-template-columns:1fr min(320px,36%);gap:20px;align-items:start} @media(max-width:900px){.ec-sub-2--form,.ec-sub-2--table-wide{grid-template-columns:1fr}} /* compact sub-section title */ .ec-sub-title{ font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ec-muted);margin:0 0 12px;line-height:1; display:flex;align-items:center;gap:8px; } .ec-sub-count{ font-size:.7rem;font-weight:600;background:rgba(0,0,0,.06); padding:1px 7px;border-radius:20px;letter-spacing:0;text-transform:none; } /* neutralise the !important border on form-card inside ec-form-panel */ .ec-form-panel .form-card{border:none!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;padding:0!important} /* compact forms inside ec-content */ .ec-content .form-card{padding:16px 18px} .ec-content .field{margin-bottom:10px} .ec-content .field label{font-size:.8rem;margin-bottom:4px} .ec-content .field input,.ec-content .field select{padding:7px 10px;font-size:.86rem} .ec-content .field textarea{min-height:76px;font-size:.86rem;padding:7px 10px} .ec-content .field-row{gap:10px} /* compact tables inside ec-content – Stripe style */ .ec-table-card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;margin-bottom:28px} .ec-content .matrix{width:100%;border-collapse:collapse;font-size:.85rem} .ec-content .matrix thead th{background:#f8f9fb;border-bottom:2px solid #e5e7eb;padding:9px 14px;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b7280;white-space:nowrap;text-align:left} .ec-content .matrix td{border-bottom:1px solid #f1f3f5;padding:10px 14px;color:#111827;background:#fff;transition:background .1s;vertical-align:middle} .ec-content .matrix tbody tr:hover td{background:#f5f7ff} .ec-content .matrix tr:last-child td{border-bottom:none} .ec-content .matrix td:first-child,.ec-content .matrix th:first-child{padding-left:18px} .ec-content .matrix td:last-child,.ec-content .matrix th:last-child{padding-right:18px} /* history panel header */ .ec-hist-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap} .ec-hist-search{ padding:5px 9px;border:1px solid var(--ec-border);border-radius:8px; font:inherit;font-size:.8rem;color:var(--ec-ink);background:var(--ec-bg); width:170px;transition:border-color .15s; } .ec-hist-search:focus{border-color:var(--ec-accent);outline:none;background:#fff} .ec-hist-search::placeholder{color:var(--ec-muted)} /* status-colored left border */ .ec-content .matrix tr[data-status="pending"] td:first-child{border-left:3px solid #f59e0b;padding-left:15px} .ec-content .matrix tr[data-status="processed"] td:first-child{border-left:3px solid #22c55e;padding-left:15px} /* pill badges for motifs */ .ec-motif{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:20px; background:rgba(99,102,241,.08);color:#5457b8;white-space:nowrap} /* ── Number spinner custom controls ─────────────────────────── */ .ec-num-wrap{display:inline-flex;align-items:center;border:1px solid transparent;border-radius:6px;overflow:hidden;transition:border-color .15s,background .15s;background:transparent;width:100%} .ec-num-wrap:hover{border-color:#d1d5db;background:#fff} .ec-num-wrap:focus-within{border-color:var(--ec-accent);background:#fff} .ec-num-wrap input[type=number]{flex:1;min-width:0;border:none;background:transparent;padding:4px 4px;font:inherit;font-size:.82rem;outline:none;-moz-appearance:textfield;appearance:textfield;text-align:center} .ec-num-wrap input[type=number]::-webkit-inner-spin-button, .ec-num-wrap input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .ec-num-spin{display:flex;flex-direction:column;flex-shrink:0} .ec-num-spin-btn{border:none;background:none;cursor:pointer;padding:0 5px;height:50%;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:.65rem;line-height:1;transition:color .1s,background .1s;user-select:none} .ec-num-spin-btn:hover{color:var(--ec-accent);background:rgba(99,102,241,.06)} /* ── Pagination footer ───────────────────────────────────────── */ .pg-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px;border-top:1px solid #f1f3f5;background:#fafbfd;font-size:.8rem;color:#6b7280;flex-wrap:wrap} .pg-pager__info{white-space:nowrap} .pg-pager__btns{display:flex;align-items:center;gap:4px} .pg-pager__btn{border:1px solid #e5e7eb;background:#fff;color:#374151;border-radius:6px;padding:4px 10px;cursor:pointer;font:inherit;font-size:.78rem;font-weight:500;transition:border-color .12s,color .12s,background .12s;min-width:32px;text-align:center} .pg-pager__btn:hover:not(:disabled){border-color:var(--ec-accent);color:var(--ec-accent)} .pg-pager__btn:disabled{opacity:.4;cursor:not-allowed} .pg-pager__btn--active{background:var(--ec-accent);border-color:var(--ec-accent);color:#fff} .pg-pager__btn--active:hover{background:var(--ec-accent);color:#fff} /* form section panel */ .ec-form-panel{ background:var(--ec-card);border:1px solid var(--ec-border); border-radius:var(--ec-r-sm);overflow:hidden; } .ec-form-panel:has(.cs.open){overflow:visible;} .ec-form-panel:has(.ctp-dp.dp-open){overflow:visible;} .ec-form-panel__hd{ padding:12px 18px;border-bottom:1px solid var(--ec-border); background:var(--ec-bg);display:flex;align-items:center;gap:8px; } .ec-form-panel__body{padding:18px} .ec-form-panel__ico{ width:28px;height:28px;border-radius:8px;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .ec-form-panel__ico svg{width:14px;height:14px} .ec-form-panel__ttl{font-size:.82rem;font-weight:700;color:var(--ec-ink);margin:0} /* history card */ .ec-hist-card{ background:var(--ec-card);border:1px solid var(--ec-border); border-radius:var(--ec-r-sm);overflow:hidden; } .ec-hist-card .table-wrap{border:none;border-radius:0;background:transparent;margin:0} .ec-hist-card .matrix{min-width:0} .ec-hist-card .matrix td,.ec-hist-card .matrix th{padding:8px 12px} .ec-hist-card .matrix thead th{background:var(--ec-bg)} .ec-hist-card__top{padding:10px 12px;border-bottom:1px solid var(--ec-border);display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* compact doc-info */ #dep-doc-info{margin-top:6px;padding:8px 12px;background:var(--ec-bg);border:1px solid var(--ec-border);border-radius:8px;font-size:.8rem;color:var(--ec-muted)} /* ── Form section separator ───────────────────────────────── */ .ec-form-sep{ font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--ec-muted);margin:28px 0 14px;padding-bottom:10px; border-bottom:1px solid var(--ec-border); } .ec-form-sep:first-child{margin-top:4px} /* ── Status chip row (Variables) ──────────────────────────── */ .ec-status-row{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin-bottom:20px;padding:12px 16px; background:var(--ec-bg,#fafbff);border:1px solid var(--ec-border);border-radius:12px; } .ec-status-row__lbl{font-size:.84rem;font-weight:600;color:var(--ec-muted)} /* ── Payroll grid in ec-context ───────────────────────────── */ .ec-content .payroll-grid-wrap{border:1px solid var(--ec-border);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04)} /* toolbar */ .pg-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid #eef0f4;background:#fff} .pg-search-wrap{position:relative;flex:1;min-width:120px;max-width:220px} .pg-search-ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:#9ca3af;pointer-events:none} .pg-search{width:100%;border:1px solid var(--ec-border);border-radius:8px;padding:5px 10px 5px 28px;font:inherit;font-size:.8rem;background:#fafbff;transition:border-color .15s} .pg-search:focus{outline:none;border-color:var(--ec-accent);background:#fff} .pg-export-btn{margin-left:auto;display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:8px;border:1px solid var(--ec-border);background:#fff;font:inherit;font-size:.79rem;font-weight:600;color:var(--ec-muted);cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s} .pg-export-btn:hover{border-color:var(--ec-accent);color:var(--ec-accent)} .pg-export-btn svg{width:14px;height:14px;flex-shrink:0} /* scroll container */ .pg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%} /* table */ .ec-content .payroll-grid{min-width:100%;border-collapse:collapse;font-size:.83rem;background:#fff} .ec-content .payroll-grid thead tr{border-bottom:1px solid #e5e8ee} .ec-content .payroll-grid th{background:#fff;border-bottom:none;border-right:none;padding:0;white-space:normal;position:sticky;top:0;z-index:2} .ec-content .payroll-grid th:first-child{position:sticky;left:0;z-index:3;background:#fff;box-shadow:2px 0 0 #eef0f4} .ec-content .payroll-grid th:last-child,.ec-content .payroll-grid td:last-child{border-right:none} .ec-content .payroll-grid th[data-ci]{cursor:pointer} .ec-content .payroll-grid th[data-ci] .pg-th-inner:hover{background:rgba(99,102,241,.05)} /* data cells */ .ec-content .payroll-grid td{border-bottom:1px solid #f0f2f6;border-right:none;padding:0 12px;height:46px;white-space:nowrap;background:#fff;transition:background .12s;color:#111827;vertical-align:middle} .ec-content .payroll-grid td:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:2px 0 0 #eef0f4;padding-left:14px;padding-right:14px} /* zebra stripe */ .ec-content .payroll-grid tbody tr:nth-child(even) td{background:#f8faff} .ec-content .payroll-grid tbody tr:nth-child(even) td:first-child{background:#f8faff} /* hover overrides stripe */ .ec-content .payroll-grid tbody tr:hover td{background:#eef3ff} .ec-content .payroll-grid tbody tr:hover td:first-child{background:#eef3ff} .ec-content .payroll-grid tr:last-child td{border-bottom:none} /* th inner flex */ .pg-th-inner{display:flex;align-items:center;gap:5px;padding:9px 12px} .pg-th-type-ico{width:13px;height:13px;flex-shrink:0;color:#c5c8d0} .pg-th-lbl{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9ca3af;flex:1;min-width:0;white-space:normal;line-height:1.35;max-width:110px} .pg-flt-btn{flex-shrink:0;width:16px;height:16px;border:none;background:none;cursor:pointer;padding:1px;border-radius:3px;color:#e2e5ec;display:flex;align-items:center;justify-content:center;transition:color .12s,background .12s} .pg-flt-btn:hover{color:var(--ec-accent);background:rgba(219,50,56,.08)} .pg-flt-btn.is-active{color:var(--ec-accent)} /* employee cell */ .pg-emp-cell{display:flex!important;align-items:center;gap:9px} .pg-emp-av{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#fff;letter-spacing:.03em} .pg-emp-name{font-weight:600;font-size:.82rem;color:#1a2039} /* cell inputs */ .ec-content .payroll-grid td input[type=number],.ec-content .payroll-grid td input[type=text]{border:1px solid transparent;border-radius:6px;padding:5px 7px;font:inherit;font-size:.82rem;width:100%;min-width:60px;background:transparent;transition:border-color .15s,background .15s;text-align:right} .ec-content .payroll-grid td input[type=number]:hover,.ec-content .payroll-grid td input[type=text]:hover{border-color:#d1d5db;background:#fff} .ec-content .payroll-grid td input[type=number]:focus,.ec-content .payroll-grid td input[type=text]:focus{border-color:var(--ec-accent);background:#fff;outline:none} .ec-content .payroll-grid td input[type=checkbox]{cursor:pointer;accent-color:var(--ec-accent);width:auto} /* filter popup */ .pg-flt-popup{position:fixed;z-index:3000;min-width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px 0;font-size:.82rem;display:none} .pg-flt-popup.is-open{display:block} .pg-flt-popup-title{padding:4px 12px 6px;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9ca3af} .pg-flt-opt{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;transition:background .1s} .pg-flt-opt:hover{background:#f5f6f7} .pg-flt-opt input[type=radio]{accent-color:var(--ec-accent);cursor:pointer;margin:0} .pg-flt-opt span{cursor:pointer;color:var(--ec-ink,#1a2039);font-size:.82rem} .pg-flt-sep{border:none;border-top:1px solid #e5e7eb;margin:4px 0} .pg-flt-reset{display:block;width:100%;text-align:left;padding:5px 12px;border:none;background:none;cursor:pointer;font:inherit;font-size:.78rem;font-weight:600;color:var(--ec-accent)} .pg-flt-reset:hover{text-decoration:underline} .pg-row-hint{font-size:.78rem;color:var(--ec-muted)} /* period navigator */ .pg-period-nav{display:flex;align-items:center;gap:2px;background:#f3f4f8;border-radius:10px;padding:3px} .pg-pnav-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;border-radius:7px;color:var(--ec-muted);transition:background .12s,color .12s} .pg-pnav-btn:hover{background:#fff;color:var(--ec-ink);box-shadow:0 1px 3px rgba(0,0,0,.08)} .pg-pnav-btn svg{width:14px;height:14px} .pg-pnav-lbl{font-size:.82rem;font-weight:700;color:var(--ec-ink);min-width:100px;text-align:center;padding:0 4px} /* export modal */ .pg-export-modal{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;background:rgba(15,26,60,.4);backdrop-filter:blur(3px)} .pg-export-modal[hidden]{display:none} .pg-export-modal__box{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.18);padding:24px 24px 20px;width:340px;max-width:90vw} .pg-export-modal__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .pg-export-modal__hd strong{font-size:.95rem;font-weight:700;color:#111827} .pg-export-modal__close{border:none;background:none;cursor:pointer;font-size:1rem;color:#9ca3af;line-height:1;padding:4px 6px;border-radius:6px;transition:background .12s,color .12s} .pg-export-modal__close:hover{background:#f3f4f6;color:#374151} .pg-export-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:13px 15px;border:1.5px solid #e5e7eb;border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s;margin-bottom:10px;font:inherit} .pg-export-opt:last-child{margin-bottom:0} .pg-export-opt:hover{border-color:var(--ec-accent);background:#fdf5f5} .pg-export-opt__ico{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .pg-export-opt__ico svg{width:18px;height:18px} .pg-export-opt__ico--csv{background:#ecfdf5;color:#059669} .pg-export-opt__ico--xls{background:#eff6ff;color:#2563eb} .pg-export-opt__body{flex:1;min-width:0} .pg-export-opt__title{font-size:.88rem;font-weight:600;color:#111827;display:block;margin-bottom:2px} .pg-export-opt__desc{font-size:.74rem;color:#6b7280;display:block} /* ── Formation store modal ──────────────────────────────────── */ .ec-store-modal{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;background:rgba(15,26,60,.5);backdrop-filter:blur(6px)} .ec-store-modal[hidden]{display:none} .ec-store-modal__box{background:#fff;border-radius:20px;box-shadow:0 32px 80px rgba(0,0,0,.22);width:min(860px,95vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden} .ec-store-modal__hd{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e5e7eb;flex-shrink:0} .ec-store-modal__hd-left{display:flex;align-items:center;gap:12px} .ec-store-modal__hd-left svg{width:24px;height:24px;color:var(--ec-accent)} .ec-store-modal__hd-left strong{display:block;font-size:.95rem;font-weight:700;color:#111827} .ec-store-modal__hd-left span{display:block;font-size:.78rem;color:#6b7280} .ec-store-modal__close{border:none;background:none;cursor:pointer;font-size:1rem;color:#9ca3af;padding:6px 8px;border-radius:8px;transition:background .12s,color .12s;line-height:1} .ec-store-modal__close:hover{background:#f3f4f6;color:#374151} .ec-store-modal__body{flex:1;overflow-y:auto;padding:24px} .ec-store-modal__loading{text-align:center;padding:48px;color:#6b7280;font-size:.9rem} .ec-store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} .ec-store-card{border:1.5px solid #e5e7eb;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px;background:#fff;transition:border-color .15s,box-shadow .15s} .ec-store-card:hover{border-color:var(--ec-accent);box-shadow:0 4px 16px rgba(99,102,241,.1)} .ec-store-card__ico{width:44px;height:44px;border-radius:12px;background:rgba(99,102,241,.1);color:#6366f1;display:flex;align-items:center;justify-content:center} .ec-store-card__ico svg{width:22px;height:22px} .ec-store-card__title{font-size:.92rem;font-weight:700;color:#111827;margin:0;line-height:1.3} .ec-store-card__desc{font-size:.8rem;color:#6b7280;margin:0;flex:1;line-height:1.5} .ec-store-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto} .ec-store-card__price{font-size:.88rem;font-weight:700;color:#111827} .ec-store-empty{text-align:center;padding:48px;color:#6b7280} /* ── Submit bar ───────────────────────────────────────────── */ .ec-submit-bar{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; margin-top:24px;padding:16px 20px; background:var(--ec-bg,#fafbff);border:1px solid var(--ec-border);border-radius:14px; } .ec-submit-bar__hint{font-size:.84rem;color:var(--ec-muted)} /* ── Employee list item ───────────────────────────────────── */ .ec-emp-row{ display:flex;align-items:center;gap:12px; padding:12px 16px;border-radius:10px; border:1px solid var(--ec-border);background:var(--ec-bg,#fff); transition:box-shadow .15s; } .ec-emp-row:hover{box-shadow:0 2px 8px rgba(16,23,46,.06)} .ec-emp-row__av{ width:36px;height:36px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-weight:700;font-size:.85rem;color:#fff; } .ec-emp-row__body{flex:1;min-width:0} .ec-emp-row__name{font-weight:600;font-size:.9rem;color:var(--ec-ink)} .ec-emp-row__detail{font-size:.78rem;color:var(--ec-muted)} .ec-emp-list{display:flex;flex-direction:column;gap:8px} /* ── Column tag list ──────────────────────────────────────── */ .ec-col-item{ display:flex;align-items:center;gap:10px; padding:11px 14px;border-radius:10px; border:1px solid var(--ec-border);background:var(--ec-bg,#fff); } .ec-col-item__lbl{flex:1;font-weight:600;font-size:.9rem;color:var(--ec-ink)} .ec-col-item__type{font-size:.77rem;color:var(--ec-muted)} .ec-col-list{display:flex;flex-direction:column;gap:7px} /* ── Sélecteur indicatif téléphonique ────────────────────────── */ .tel-combo{ position:relative;display:flex;align-items:stretch; border:1px solid var(--line-2);border-radius:var(--r-sm); background:var(--card);overflow:visible; transition:border-color .15s,box-shadow .15s; } .tel-combo:focus-within{ border-color:var(--navy); box-shadow:var(--ring); } .tel-dial-btn{ display:flex;align-items:center;gap:5px; padding:0 10px 0 12px; background:var(--surface-2); border:none;border-right:1px solid var(--line-2); border-radius:var(--r-sm) 0 0 var(--r-sm); cursor:pointer;font-size:.85rem;color:var(--ink); white-space:nowrap;flex-shrink:0; transition:background .15s; } .tel-dial-btn:hover{background:var(--line-2);} .tel-dial-btn svg{width:12px;height:12px;opacity:.45;flex-shrink:0} .tel-local-input{ flex:1;min-width:0; border:none !important;box-shadow:none !important;outline:none !important; border-radius:0 var(--r-sm) var(--r-sm) 0 !important; background:transparent !important; padding:12px 14px !important; font:inherit;font-size:.98rem;color:var(--ink); } .tel-local-input::placeholder{color:#9aa1ad} .tel-dial-drop{ position:absolute;top:calc(100% + 4px);left:0;z-index:250; background:var(--card); border:1px solid var(--line);border-radius:var(--r-sm); box-shadow:0 8px 28px rgba(0,0,0,.13); min-width:250px;max-height:270px;overflow-y:auto; } .tel-dial-item{ display:flex;align-items:center;gap:10px; padding:9px 14px;cursor:pointer;font-size:.84rem; transition:background .1s; } .tel-dial-item:hover,.tel-dial-item[aria-selected="true"]{background:var(--surface-2);} .tel-dial-item[aria-selected="true"]{font-weight:600;} .tel-dial-item__flag{display:flex;align-items:center;flex-shrink:0} .tel-flag-img{width:22px;height:auto;border-radius:2px;display:block;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08)} .tel-dial-item__name{flex:1;color:var(--ink)} .tel-dial-item__code{color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:.82rem} /* ── Testimonials carousel ── */ .testimonials { display:block; position:relative; overflow:hidden; padding:3.5rem 0 2.5rem; background:var(--surface); transform:translateZ(0); } .testimonials-inner { display:flex; transition:transform .55s cubic-bezier(.4,0,.2,1); } .testimonial-slide { min-width:100%; padding:0 max(1.5rem, calc(50% - 400px)); box-sizing:border-box; } .testimonial-card { position:relative; overflow:hidden; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:2rem 2rem 1.75rem; } .testimonial-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-brand); } .tcard-deco { font-family:Georgia,serif; font-size:5rem; line-height:.8; color:var(--red); opacity:.1; position:absolute; top:.75rem; left:1.5rem; font-weight:700; pointer-events:none; user-select:none; } .tcard-stars { display:inline-flex; gap:3px; color:var(--orange); margin-bottom:1rem; } .tcard-stars svg { width:15px; height:15px; } .testimonial-quote { font-size:1.05rem; line-height:1.78; color:var(--ink-2); margin:0 0 1.5rem; font-style:italic; } .tcard-author { display:flex; align-items:center; gap:.875rem; padding-top:1.25rem; border-top:1px solid var(--line); } .tcard-avatar { flex:0 0 auto; width:44px; height:44px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; letter-spacing:-.01em; } .tcard-author-info { display:flex; flex-direction:column; gap:.1rem; } .tcard-author-info strong { color:var(--navy); font-size:.93rem; } .tcard-author-info span { color:var(--muted); font-size:.78rem; } .testimonials-dots { display:flex; justify-content:center; gap:.5rem; margin-top:1.75rem; } .testimonials-dots button { width:26px; height:6px; border-radius:3px; border:none; background:var(--line); cursor:pointer; padding:0; transition:background var(--t),width var(--t); } .testimonials-dots button.active { background:var(--red); width:42px; } .testimonials-nav { position:absolute; top:calc(50% - 14px); transform:translateY(-50%); background:var(--bg); border:1px solid var(--line); border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--t),box-shadow var(--t),border-color var(--t),color var(--t); box-shadow:var(--shadow-sm); color:var(--ink-2); z-index:10; } .testimonials-nav svg { width:20px; height:20px; } .testimonials-nav:hover { background:var(--red); border-color:var(--red); color:#fff; box-shadow:var(--shadow-md); } .testimonials-nav.prev { left:1.25rem; } .testimonials-nav.next { right:1.25rem; } @media (max-width:600px) { .testimonials-nav { display:none; } } /* ── Detail formation : hero + deux colonnes ─────────────────────────── */ .detail-hero { background: linear-gradient(135deg, #0a1128 0%, #162050 50%, #0a1128 100%); padding: 56px 0 68px; position: relative; overflow: hidden; } .detail-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 20% 60%, rgba(246,140,28,.09) 0%, transparent 60%), radial-gradient(ellipse 50% 70% at 85% 30%, rgba(80,120,255,.10) 0%, transparent 60%); pointer-events: none; } .detail-hero-grid { display: grid; grid-template-columns: 1fr 340px; gap: 52px; align-items: center; } .detail-hero-copy { min-width: 0; } .detail-hero .eyebrow { margin-bottom: .5em; } .detail-hero h1 { color: #fff; margin: 10px 0 16px; font-size: clamp(1.7rem, 3.6vw, 2.4rem); } .detail-hero .lead { color: rgba(255,255,255,.68); max-width: 100%; font-size: 1.05rem; margin-bottom: 0; } .detail-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .detail-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .detail-hero-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.82); border-radius: var(--r-pill); padding: 7px 16px; font-size: .85rem; } .detail-hero-chip svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--orange); } .detail-hero-panel { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-lg); padding: 28px 26px 26px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .detail-hero-panel-label { text-align: center; font-size: .78rem; color: rgba(255,255,255,.45); margin: 0 0 2px; text-transform: uppercase; letter-spacing: .08em; } .detail-hero-panel-price { text-align: center; font-size: 2.4rem; font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1; margin: 0 0 4px; } .detail-hero-panel-price span { font-size: 1rem; font-weight: 400; opacity: .6; letter-spacing: 0; } .detail-hero-panel-facts { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; } .detail-hero-panel-facts li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: .88rem; } .detail-hero-panel-facts li svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--orange); } .detail-hero-img { margin-top: 32px; border-radius: var(--r-lg); overflow: hidden; height: 280px; position: relative; box-shadow: 0 20px 60px -10px rgba(0,0,0,.5); } .detail-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .detail-section { padding: 48px 0 80px; } .detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 468px; gap: 48px; align-items: start; } .detail-content { min-width: 0; } .detail-aside { position: sticky; top: 82px; } .detail-content h2 { font-size: 1.18rem; font-weight: 700; margin: 36px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--ink); letter-spacing: -.015em; } .detail-content h2:first-of-type { margin-top: 0; } .detail-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .88rem; margin-bottom: 32px; transition: color .15s; } .detail-back:hover { color: var(--ink); text-decoration: none; } /* Booking card elevated */ .form-card.booking { box-shadow: 0 8px 40px -8px rgba(22,35,94,.14), 0 2px 8px rgba(22,35,94,.06); border-color: var(--line); padding: 28px; } .form-card.booking svg { width: 16px; height: 16px; flex: 0 0 auto; } .booking .course-price { font-size: 2.6rem; letter-spacing: -.05em; line-height: 1; font-weight: 800; color: var(--navy); } /* Session option selected : override specificity for the new layout */ .session-opt:has(input:checked) .session-opt-body { background: rgba(22,35,94,.03); } /* Hero result count */ .shop-result-count { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); padding: 10px 0; } .shop-result-count strong { color: var(--ink); } /* Trust icons row (hero) */ .shop-trust { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; margin-top: 28px; } .shop-trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.72); padding: 8px 20px; border-right: 1px solid rgba(255,255,255,.12); } .shop-trust-item:last-child { border-right: none; } .shop-trust-item svg { width: 15px; height: 15px; color: rgba(255,255,255,.5); flex-shrink: 0; } @media (max-width: 920px) { .detail-hero-grid { grid-template-columns: 1fr; gap: 32px; } .detail-hero-panel { max-width: 420px; } } @media (max-width: 880px) { .detail-layout { grid-template-columns: 1fr; gap: 0; } .detail-aside { position: static; margin-bottom: 32px; order: -1; } } @media (max-width: 600px) { .shop-trust-item { border-right: none; padding: 6px 14px; } .detail-hero { padding: 36px 0 44px; } .detail-hero-panel { max-width: none; } .detail-hero-chips { gap: 8px; } .detail-hero-chip { font-size: .8rem; padding: 6px 12px; } } /* ===================================================================== PAGES AUTH : connexion / inscription / 2FA ===================================================================== */ .auth-wrap { display: flex; align-items: center; min-height: calc(100vh - 66px); } /* — Panneau gauche : marque (carte flottante) ——————————————————————————— */ .auth-brand { position: relative; width: 42%; flex-shrink: 0; align-self: center; margin: 40px 0 40px 48px; background: var(--grad-hero); color: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; overflow: hidden; } .auth-brand::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(46% 62% at 100% -4%, rgba(247,148,29,.18), transparent 62%), radial-gradient(40% 54% at 82% 14%, rgba(219,50,56,.08), transparent 66%); pointer-events: none; } .auth-brand-logo { display: block; width: 156px; margin-bottom: 52px; flex-shrink: 0; } .auth-brand-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 700; color: var(--orange); margin-bottom: 12px; } .auth-brand h2 { font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: 800; color: var(--navy); margin-bottom: .55em; line-height: 1.14; } .auth-brand-sub { color: var(--muted); font-size: .97rem; line-height: 1.65; margin: 0 0 36px; } .auth-brand-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .auth-brand-list li { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: .93rem; } .auth-brand-list li svg { color: var(--orange); width: 17px; height: 17px; flex-shrink: 0; } .auth-brand-quote { margin-top: 32px; padding: 18px 20px; background: rgba(255,255,255,.52); border-radius: var(--r); border-left: 3px solid var(--orange); } .auth-brand-quote blockquote { font-style: italic; color: var(--ink-2); font-size: .86rem; line-height: 1.65; margin: 0 0 14px; } .auth-brand-quote figcaption { display: flex; align-items: center; gap: 10px; margin: 0; } .auth-quote-avatar { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; } .auth-brand-quote strong { display: block; font-size: .82rem; color: var(--ink); margin-bottom: 1px; } .auth-brand-quote figcaption span { font-size: .74rem; color: var(--muted); } .auth-brand-footer { margin-top: auto; padding-top: 36px; font-size: .78rem; color: var(--muted); } /* — Panneau droit : formulaire ——————————————————————————————————————— */ .auth-form-panel { flex: 1; min-height: calc(100vh - 66px); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 52px 40px; background: var(--bg); } .auth-form-inner { width: 100%; max-width: 420px; } .auth-form-head { margin-bottom: 28px; } .auth-form-head h1 { font-size: clamp(1.5rem, 2.8vw, 1.9rem); margin-bottom: .3em; } .auth-form-head p { color: var(--muted); font-size: .96rem; margin: 0; line-height: 1.5; } /* — Champ mot de passe avec toggle visibilité ————————————————————— */ .field--password { position: relative; } .field--password input { padding-right: 46px; } .pwd-toggle { position: absolute; right: 11px; bottom: 11px; background: none; border: none; padding: 3px; cursor: pointer; color: var(--muted); display: flex; align-items: center; border-radius: 4px; transition: color var(--t-fast); line-height: 1; } .pwd-toggle:hover { color: var(--ink); } .pwd-toggle svg { width: 17px; height: 17px; pointer-events: none; } /* — Indicateur force du mot de passe ——————————————————————————————— */ .pw-strength { margin-top: 6px; display: none; } .pw-strength.visible { display: block; } .pw-strength-bar { display: flex; gap: 4px; margin-bottom: 5px; } .pw-strength-seg { flex: 1; height: 3px; border-radius: 99px; background: var(--line-2); transition: background .3s; } .pw-strength-seg.s-weak { background: #ef4444; } .pw-strength-seg.s-fair { background: #f59e0b; } .pw-strength-seg.s-good { background: #3b82f6; } .pw-strength-seg.s-strong { background: #22c55e; } .pw-strength-label { font-size: .77rem; color: var(--muted); transition: color .3s; } /* — Checkbox remember me ————————————————————————————————————————————— */ .field--check { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; } .field--check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--red); flex-shrink: 0; cursor: pointer; margin: 0; } .field--check label { font-size: .9rem; color: var(--ink-2); font-weight: 400; cursor: pointer; margin: 0; line-height: 1; } /* — Bouton avec état chargement ————————————————————————————————————— */ .btn-submit-wrap { position: relative; } .btn-submit-wrap.is-loading .btn-primary { pointer-events: none; opacity: .75; } .btn-submit-wrap.is-loading::after { content: ''; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: auth-spin .65s linear infinite; } @keyframes auth-spin { to { transform: translateY(-50%) rotate(360deg); } } /* — 2FA : grille de cases individuelles ————————————————————————————— */ .twofa-code-row { display: flex; gap: 8px; justify-content: center; margin: 22px 0 26px; } .twofa-digit { width: 50px; height: 60px; text-align: center; font-size: 1.5rem; font-weight: 700; border: 2px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); color: var(--ink); transition: border-color .15s, box-shadow .15s, background .15s; outline: none; padding: 0; -moz-appearance: textfield; appearance: textfield; caret-color: var(--red); } .twofa-digit::-webkit-inner-spin-button, .twofa-digit::-webkit-outer-spin-button { display: none; } .twofa-digit:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22,35,94,.11); background: var(--card); } .twofa-digit.is-filled { border-color: var(--red); } .twofa-sep { display: flex; align-items: center; color: var(--muted); font-size: 1.1rem; padding-bottom: 2px; align-self: center; } .twofa-actions { display: flex; flex-direction: column; gap: 10px; } /* — Divider "ou continuer avec" ———————————————————————————————————— */ .auth-divider { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .82rem; margin: 20px 0; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* — Bande "vous avez déjà un compte ?" ——————————————————————————— */ .auth-switch { text-align: center; margin-top: 22px; font-size: .9rem; color: var(--muted); display: flex; justify-content: center; align-items: center; gap: 10px; } .auth-switch a { font-weight: 600; } /* — Trust badge bas de page ————————————————————————————————————————— */ .auth-trust { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; font-size: .82rem; color: var(--muted); text-align: center; line-height: 1.5; } .auth-trust svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--navy); opacity: .35; } /* — Validation inline des champs ————————————————————————————————— */ .field.is-valid input, .field.is-valid select { border-color: #22c55e; } .field.is-invalid input, .field.is-invalid select { border-color: #ef4444; } .field-feedback { display: none; font-size: .77rem; margin-top: 4px; } .field.is-invalid .field-feedback { display: block; color: #ef4444; } .field.is-valid .field-feedback { display: block; color: #22c55e; } /* — Responsive —————————————————————————————————————————————————————— */ @media (max-width: 860px) { .auth-brand { display: none; } .auth-form-panel { margin-left: 0; min-height: auto; padding: 40px 20px; } } @media (max-width: 480px) { .auth-form-panel { padding: 28px 16px; } .twofa-digit { width: 42px; height: 52px; font-size: 1.3rem; } .twofa-code-row { gap: 6px; } }