@import url("https://fonts.googleapis.com/css2?family=Anton&family=Caveat:wght@600;700&family=Quicksand:wght@400;500;700&display=swap"); /* ===== ATELIER GPT : DEBUT (charte v2) ===== */ :root:root:root { --cp-brand-primary: #e3668d; --cp-brand-secondary: #755566; --cp-brand-tertiary: #e9a7c6; --cp-brand-background: #f2eae0; --cp-brand-surface: #f2eae0; --cp-brand-font: #111111; --cp-brand-sidebar: #ffffff; --cp-brand-border: #e3d8d1; --cp-primary-50: #fdf2f6; --cp-primary-100: #f9e0e8; --cp-primary-200: #f4c2d1; --cp-primary-300: #efa3ba; --cp-primary-400: #e985a3; --cp-primary-500: #e3668d; --cp-primary-600: #ae516e; --cp-primary-700: #8f425a; --cp-primary-800: #703448; --cp-primary-900: #522636; --primary-50: #fdf2f6; --primary-100: #f9e0e8; --primary-200: #f4c2d1; --primary-300: #efa3ba; --primary-400: #e985a3; --primary-500: #e3668d; --primary-600: #ae516e; --primary-700: #8f425a; --primary-800: #703448; --primary-900: #522636; --cp-secondary-50: #f7f4f6; --cp-secondary-100: #eae6e8; --cp-secondary-200: #dad2d6; --cp-secondary-300: #c1b2ba; --cp-secondary-400: #98818e; --cp-secondary-500: #755566; --cp-secondary-600: #654858; --cp-secondary-700: #4d3a44; --cp-secondary-800: #3c2d35; --cp-secondary-900: #2b2026; --cp-tertiary-50: #fdf6fa; --cp-tertiary-100: #fae9f1; --cp-tertiary-200: #f3cfe0; --cp-tertiary-300: #eebbd4; --cp-tertiary-400: #edbad3; --cp-tertiary-500: #e9a7c6; --cp-tertiary-600: #bb86a0; --cp-tertiary-700: #96687f; --cp-tertiary-800: #714d5f; --cp-tertiary-900: #4c3340; --cp-text-on-primary: #111111; --cp-text-on-secondary: #ffffff; --cp-text-on-tertiary: #111111; /* Plus aucun gris : textes, bordures et fonds passent en Prune, Rose et Crème */ --cp-text-primary: #111111; --cp-text-secondary: #4d3a44; --cp-text-muted: #755566; --cp-text-disabled: #98818e; --cp-font-50: #faf7f3; --cp-font-100: #f2eae0; --cp-font-200: #4d3a44; --cp-font-300: #98818e; --cp-font-400: #98818e; --cp-font-500: #755566; --cp-font-600: #4d3a44; --cp-font-700: #4d3a44; --cp-font-800: #e3d8d1; --gray-50: #faf7f3; --gray-100: #f2eae0; --gray-200: #f3cfe0; --gray-300: #e9a7c6; --gray-400: #98818e; --gray-500: #755566; --gray-600: #654858; --gray-700: #4d3a44; --gray-800: #3c2d35; --gray-900: #2b2026; --cp-border-300: #fae9f1; --cp-border-400: #fae9f1; --cp-border-500: #f3cfe0; --cp-border-600: #4d3a44; --cp-border-700: #c1b2ba; --cp-border-800: #98818e; --cp-border-900: #755566; --cp-surface-500: #f2eae0; --cp-surface-600: #e3d8d1; --cp-surface-700: #c1b2ba; --cp-surface-800: #98818e; --cp-surface-900: #755566; --cp-background-600: #e3d8d1; --cp-background-700: #c1b2ba; --cp-background-800: #98818e; --cp-background-900: #755566; } /* Polices */ body, .hr-config-provider, .font-sans, button, input, textarea, select, .montserrat-regular, .montserrat-medium, .montserrat-semibold, .montserrat-bold { font-family: "Quicksand", system-ui, sans-serif !important; } h1, h2, h3, .text-5xl, .text-4xl { font-family: "Anton", Impact, sans-serif !important; font-weight: 400 !important; letter-spacing: 0.01em; } .hr-button.cp-button { border-radius: 999px !important; font-weight: 700 !important; } ::selection { background: #e9a7c6; color: #111111; } /* ===== PAGE DE CONNEXION ===== */ .auth-page .cp-main-content-inner { padding-top: calc(1.5rem + 36px) !important; } .auth-page, .auth-page main, .auth-page .cp-main-content, .auth-page .cp-content-area, .auth-page [class*="bg-background"] { background: #f2eae0 !important; } .auth-page .cp-main-content-inner > div[class*="min-h-"] { min-height: calc(100dvh - 84px) !important; } /* Colonne de gauche : fond crème avec étincelles qui dérivent */ .auth-page section { position: relative; } .auth-page section::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; background: url("data:image/svg+xml;utf8,") repeat; animation: ag-drift 60s linear infinite; } /* Carte du formulaire : bordure noire, ombre rose, entrée douce */ .auth-page section > div.mx-auto { position: relative; z-index: 1; flex: 0 0 auto !important; margin-block: auto !important; background: #ffffff; border: 3px solid #111111; border-radius: 28px; padding: 30px 28px !important; box-shadow: 10px 10px 0 #e9a7c6; animation: ag-rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) both; } /* Titres : nom du portail en Anton, accroche en Caveat avec trait en arc */ .auth-page section p.hr-text-3xl.truncate { font-family: "Anton", Impact, sans-serif !important; font-weight: 400 !important; font-size: 2rem !important; line-height: 1.1; text-transform: uppercase; color: #111111 !important; overflow: visible !important; white-space: normal !important; } .auth-page section p.hr-text-3xl.truncate + p { font-family: "Caveat", cursive !important; font-weight: 700 !important; font-size: 1.55rem !important; line-height: 1.1; color: #ae516e !important; position: relative; display: inline-block; padding-bottom: 10px; } .auth-page section p.hr-text-3xl.truncate + p::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; clip-path: inset(0 100% 0 0); animation: ag-draw 1.1s 0.5s cubic-bezier(0.6, 0.1, 0.2, 1) forwards; } .auth-page section p.montserrat-semibold { font-family: "Anton", Impact, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.9rem !important; color: #111111 !important; margin-bottom: 6px; } /* Champs et boutons en pilule */ .auth-page .hr-input, .auth-page .hr-input__border, .auth-page .hr-input__state-border { border-radius: 999px !important; } .auth-page .hr-input { background: #faf7f3 !important; transition: box-shadow 0.2s, transform 0.2s; } .auth-page .hr-input:focus-within { box-shadow: 0 0 0 3px #e3668d !important; transform: translateY(-1px); } .auth-page #login-modal-email-password-button { background: #e3668d !important; color: #111111 !important; border: 2px solid #111111 !important; box-shadow: 0 4px 0 #111111 !important; transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s; } .auth-page #login-modal-email-password-button:hover { background: #ae516e !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 6px 0 #111111 !important; } .auth-page #login-modal-email-password-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #111111 !important; } .auth-page #login-modal-secure-code-button { background: #ffffff !important; color: #4d3a44 !important; border: 2px solid #4d3a44 !important; box-shadow: 0 4px 0 #4d3a44 !important; transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s; } .auth-page #login-modal-secure-code-button:hover { background: #755566 !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 6px 0 #4d3a44 !important; } .auth-page #login-modal-signup-button { color: #ae516e !important; font-weight: 700 !important; } /* Image de droite : cadre noir, ombre rose, étincelles et pastille */ .auth-page #cp-auth-hero { margin: 44px 28px 28px 0; border: 3px solid #111111; border-radius: 36px; box-shadow: 12px 12px 0 #e9a7c6; background-color: #ffffff; animation: ag-rise 0.8s 0.15s cubic-bezier(0.2, 0.9, 0.3, 1) both; } .auth-page #cp-auth-hero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("data:image/svg+xml;utf8,") repeat; animation: ag-drift 45s linear infinite reverse; } .auth-page #cp-auth-hero::after { content: "Bienvenue dans l'atelier"; position: absolute; z-index: 3; left: 28px; bottom: 30px; background: #e3668d; color: #111111; border: 2px solid #111111; border-radius: 999px; padding: 6px 22px 8px; font: 700 1.7rem/1.1 "Caveat", cursive; box-shadow: 0 4px 0 #111111; transform: rotate(-4deg); animation: ag-float 5s ease-in-out infinite; } /* Champs, séparateurs et pied de carte : couleurs de la charte */ .auth-page input::placeholder { color: #98818e !important; opacity: 1; } .auth-page .hr-input__border, .auth-page .hr-input__state-border { border: 2px solid #e9a7c6 !important; } .auth-page .hr-divider__line { background: #e9a7c6 !important; height: 2px !important; } .auth-page .hr-form-item-label__asterisk { color: #ae516e !important; } .auth-page #cp-auth-footer, .auth-page #cp-auth-footer * { color: #755566 !important; } .auth-page #cp-auth-footer a:hover { color: #ae516e !important; } /* Image de droite : les coins gris deviennent roses (fusion avec un rose très clair) */ .auth-page #cp-auth-hero { background-color: #fbe3ed !important; background-blend-mode: multiply; animation: ag-rise 0.8s 0.15s cubic-bezier(0.2, 0.9, 0.3, 1) both, ag-wobble 9s 1s ease-in-out infinite; } @keyframes ag-wobble { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(0.9deg); } } /* Une de vos illustrations dépasse du coin de la carte (hébergée sur l'application) */ .auth-page section > div.mx-auto::after { content: ""; position: absolute; top: -58px; right: -78px; width: 150px; height: 112px; z-index: 5; pointer-events: none; background: url("https://generateur-bases-connaissances-ia.vercel.app/visuels/cartoon-04.png") center/contain no-repeat; transform: rotate(7deg); animation: ag-float2 6s ease-in-out infinite; } @keyframes ag-float2 { 50% { transform: rotate(3deg) translateY(-9px); } } @media (max-width: 1100px) { .auth-page section > div.mx-auto::after { right: -28px; width: 110px; height: 82px; top: -46px; } } @media (max-width: 640px) { .auth-page section > div.mx-auto::after { display: none; } } /* Bandeau défilant (créé par le JavaScript) : visible seulement sur la page de connexion */ #ag-ribbon { display: none; position: fixed; top: 0; left: 0; right: 0; height: 36px; overflow: hidden; z-index: 50; background: #755566; border-bottom: 3px solid #4d3a44; } body:has(.auth-page) #ag-ribbon { display: flex; align-items: center; } #ag-ribbon .ag-track { display: flex; gap: 24px; white-space: nowrap; width: max-content; animation: ag-marquee 45s linear infinite; font: 400 17px "Anton", Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.09em; color: #f2eae0; } #ag-ribbon .ag-track i { font-style: normal; color: #e9a7c6; } /* Ligne de crédit */ #ag-credit { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; align-items: center; padding: 18px 16px 22px; margin-top: 8px; border-top: 2px solid #f3cfe0; background: #ffffff; font: 600 14px "Quicksand", system-ui, sans-serif; color: #4d3a44; text-align: center; } #ag-credit .ag-heart { width: 18px; height: 18px; fill: #e3668d; animation: ag-beat 1.6s ease-in-out infinite; } #ag-credit .ag-bar { color: #c1b2ba; } #ag-credit a { position: relative; display: inline-block; padding: 0 2px 6px; text-decoration: none; color: #ae516e; font-weight: 700; } #ag-credit a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; } @keyframes ag-drift { to { background-position: 360px 360px; } } @keyframes ag-rise { from { opacity: 0; transform: translateY(22px); } } @keyframes ag-draw { to { clip-path: inset(0 0 0 0); } } @keyframes ag-float { 50% { transform: rotate(-4deg) translateY(-8px); } } @keyframes ag-marquee { to { transform: translateX(-50%); } } @keyframes ag-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.2); } } @media (max-width: 640px) { .auth-page section > div.mx-auto { padding: 22px 18px !important; box-shadow: 6px 6px 0 #e9a7c6; } } @media (prefers-reduced-motion: reduce) { .auth-page section::before, .auth-page #cp-auth-hero::before, .auth-page #cp-auth-hero::after, #ag-ribbon .ag-track, #ag-credit .ag-heart { animation: none !important; } .auth-page section > div.mx-auto, .auth-page #cp-auth-hero, .auth-page section > div.mx-auto::after { animation: none !important; } .auth-page section p.hr-text-3xl.truncate + p::after { animation: none; clip-path: none; } } /* ===== ATELIER GPT : FIN ===== */