/* ============================================================= JPCO 2026 · 9ème Journée Pharmacie Clinique en Oncologie Direction « Clinical warmth » : vert forêt profond + terracotta, crème vivant, motif capsule (écho des gélules du bandeau). Typo alignée sur le bandeau (sans humaniste arrondi) : Display : Nunito · Corps : Nunito Sans · Labels : IBM Plex Mono ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@500;600&display=swap'); :root { --font-display : 'Nunito', 'Helvetica Neue', system-ui, sans-serif; --font-body : 'Nunito Sans', 'Helvetica Neue', system-ui, sans-serif; --font-mono : 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --font-family : var(--font-body); --cream : #f5f1e6; --paper : #fffefb; --ink : #1e2a23; --ink-soft : #4b5a51; --forest : #175c37; /* titres · fort contraste */ --green : #3f9c5a; /* marque (bandeau, contrôles) */ --terracotta : #c8763c; /* accent vif · liens, CTA */ --terracotta-deep : #a4531f; --line : #e6dfce; --accent-color : var(--terracotta); --accent-dark : var(--terracotta-deep); --accent-light : color-mix(in srgb, var(--terracotta) 12%, white); --bg : var(--cream); --surface : var(--paper); --surface-subtle : var(--paper); } /* --- Selection / scrollbar ----------------------------------- */ ::selection { background: var(--forest); color: #fff; } ::-moz-selection { background: var(--forest); color: #fff; } /* --- Base : crème vivant (halos radiaux) --------------------- */ /* Scopé sur .template-jpco-2026 pour passer devant la classe utilitaire `bg-white` posée sur (sinon le crème + les halos sont recouverts de blanc). */ body { font-family: var(--font-body); color: var(--ink); } body.template-jpco-2026 { /* Tailles relatives au viewport (plancher en px) → couverture constante mobile ↔ desktop. En px fixes, les halos couvraient tout l'écran en mobile mais juste un coin en desktop. */ background: radial-gradient(max(780px, 78vw) max(560px, 68vh) at 96% 42%, color-mix(in srgb, var(--green) 32%, transparent), transparent 60%), radial-gradient(max(740px, 76vw) max(520px, 64vh) at 4% 84%, color-mix(in srgb, var(--terracotta) 30%, transparent), transparent 58%), var(--cream) !important; background-attachment: fixed; } /* Scroll custom : scrollbar native masquée + barre de progression verticale à droite */ html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; } .congress-scroll-progress { position: fixed; top: 0; right: 0; width: 3px; height: 100%; z-index: 999; background: color-mix(in srgb, var(--green) 14%, transparent); pointer-events: none; } .congress-scroll-progress-fill { width: 100%; height: 0; background: linear-gradient(180deg, var(--forest), var(--green) 50%, var(--terracotta)); } @media (max-width: 991px) { .congress-scroll-progress { display: none; } } /* ============================================================= HERO · bandeau plein largeur + filet capsule ============================================================= */ .congress-hero { position: relative; overflow: hidden; background: var(--cream); } @keyframes heroReveal { from { transform: scale(1.03); opacity: 0.85; } to { transform: scale(1); opacity: 1; } } .congress-hero img.congress-hero-image { width: 100%; height: auto; display: block; animation: heroReveal 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) both; } .congress-hero-overlay { display: none; } .congress-hero-edge { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; z-index: 2; background: linear-gradient(90deg, var(--forest), var(--green) 45%, var(--terracotta)); } /* ============================================================= CONTENU (page builder) · typographie contrastée ============================================================= */ /* Largeur de contenu homogène : pages, formulaire ET accueil au même max centré (sinon le formulaire, dans .congress-container à 90rem, paraît plus large que l'accueil). */ .congress-content { max-width: 72rem; margin-left: auto; margin-right: auto; } .congress-content h1, .congress-content h2:not([data-form-title]):not(.auth-h2), .congress-content h3, .congress-content h4 { font-family: var(--font-display); color: var(--forest); letter-spacing: -0.015em; line-height: 1.12; } .congress-content h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; margin: 0 0 0.6rem; } .congress-content h2:not([data-form-title]):not(.auth-h2) { font-size: clamp(1.4rem, 2.4vw, 1.95rem); font-weight: 700; margin: 2.2rem 0 0.9rem; } .congress-content h3 { font-size: 1.2rem; font-weight: 700; margin: 1.6rem 0 0.6rem; color: var(--ink); } .congress-content h4 { font-size: 1.02rem; font-weight: 600; margin: 1.2rem 0 0.4rem; color: var(--ink); } /* Signature : capsule bicolore sous les H2 de contenu (écho des gélules) */ .congress-content h2:not([data-form-title]):not(.auth-h2)::after { content: ""; display: block; margin-top: 0.6rem; width: 58px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--terracotta)); } .congress-content p:not([class]) { font-size: 1.0rem; line-height: 1.75; color: var(--ink-soft); margin: 0 0 1rem; } .congress-content strong { color: var(--ink); font-weight: 700; } .congress-content a:not([class]) { color: var(--terracotta-deep); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2.5px; text-decoration-color: color-mix(in srgb, var(--terracotta) 45%, transparent); transition: color .15s ease, text-decoration-color .15s ease; } .congress-content a:not([class]):hover { color: var(--forest); text-decoration-color: var(--forest); } /* Listes : puce capsule verte */ .congress-content ul { list-style: none; padding-left: 0; margin: 0 0 1.1rem; } .congress-content ul li { position: relative; padding: 4px 0 4px 26px; line-height: 1.7; color: var(--ink-soft); } .congress-content ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 13px; height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--terracotta)); } .congress-content ol { padding-left: 1.2rem; margin: 0 0 1.1rem; } .congress-content ol li { padding: 3px 0; line-height: 1.7; color: var(--ink-soft); } .congress-content ol li::marker { color: var(--terracotta); font-weight: 700; } .congress-content blockquote { margin: 1.5rem 0; padding: 0.9rem 1.25rem; border-radius: 0 10px 10px 0; border-left: 3px solid var(--terracotta); background: color-mix(in srgb, var(--terracotta) 6%, var(--paper)); color: var(--ink); font-style: italic; } .congress-content hr { border: 0; height: 1px; margin: 2.2rem 0; background: linear-gradient(90deg, transparent, var(--line), transparent); } .congress-content table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: 0.95rem; } .congress-content table thead th { background: var(--forest); color: #fff; text-align: left; padding: 0.7rem 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; } .congress-content table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); } .congress-content table tr:hover td { background: color-mix(in srgb, var(--green) 5%, transparent); } /* Eyebrow / label clinique (réutilisable dans le page builder) */ .congress-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--terracotta-deep); } .congress-eyebrow::before { content: ""; width: 14px; height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--terracotta)); } /* ============================================================= CARTES ============================================================= */ .congress-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 1.75rem; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .congress-card:hover { box-shadow: 0 14px 30px -18px rgba(23, 92, 55, 0.35); border-color: color-mix(in srgb, var(--green) 40%, var(--line)); transform: translateY(-2px); } .congress-card-accent { border-left: 3px solid var(--terracotta); } /* ============================================================= BOUTONS / CTA (pilule) ============================================================= */ .congress-nav-btn { border-radius: 999px; font-weight: 600; padding: 0.5rem 1.1rem; transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; } .congress-nav-btn--primary { background: var(--terracotta); color: #fff; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--terracotta) 80%, black); } .congress-nav-btn--primary:hover { background: var(--terracotta-deep); transform: translateY(-1px); } .congress-nav-btn--ghost { border: 1.5px solid color-mix(in srgb, var(--forest) 30%, transparent); color: var(--forest); background: transparent; } .congress-nav-btn--ghost:hover { background: color-mix(in srgb, var(--forest) 8%, transparent); } /* ============================================================= BACK TO TOP + progression de scroll ============================================================= */ #backToTop { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--forest); color: #fff; border-radius: 999px; box-shadow: 0 8px 20px color-mix(in srgb, var(--forest) 45%, transparent); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; z-index: 50; cursor: pointer; } #backToTop.visible { opacity: 1; visibility: visible; transform: translateY(0); } /* ============================================================= Animations d'apparition au scroll ============================================================= */ @keyframes congress-fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .congress-animate-in { opacity: 0; } .congress-animate-in.is-visible { animation: congress-fadeInUp 0.5s ease-out both; } /* ============================================================= FORMULAIRE · sections en carte (couleurs JPCO) ============================================================= */ .congress-form { background: transparent !important; } .congress-form-section { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem 1.5rem; box-shadow: 0 1px 2px rgba(23, 92, 55, 0.04); transition: box-shadow 0.2s ease, border-color 0.2s ease; } .congress-form-section:hover { box-shadow: 0 6px 18px -12px rgba(23, 92, 55, 0.28); border-color: color-mix(in srgb, var(--green) 35%, var(--line)); } .congress-form-section input:not([type="checkbox"]):not([type="file"]), .congress-form-section select, .congress-form-section textarea, .congress-form-section label:has(input[type="radio"].sr-only:not(:checked)) span { background-color: #fff !important; } .congress-form-section h2[data-form-title] { margin-top: 0; } .congress-form form.space-y-5 > .congress-form-section + .congress-form-section { margin-top: 1.25rem; } .congress-form-divider { height: 1px; margin: 2rem 0; opacity: 0.4; background: linear-gradient(90deg, transparent, var(--green), var(--terracotta), transparent); } /* Barre de navigation du form (Étape suivante…) : le border gris froid ressort en trait clair sur le crème → on le neutralise. */ .congress-content form .flex.items-end.justify-between.border-t { border-top-color: transparent !important; } /* Label flottant : couleur du congrès quand le champ est actif (focus), comme la bordure. */ .congress-content .peer:focus ~ label, .congress-auth-form .peer:focus ~ label { color: var(--primary-color, #2563eb) !important; }