/* =========================================================================== UNISAB — header / footer / home Styles portés depuis la maquette Lovable (Tailwind 4) vers du CSS autonome. Toutes les classes sont préfixées `usb-` pour ne pas entrer en collision avec Bootstrap 3 (.container, .row, .nav, .logo, .footer... existent déjà). =========================================================================== */ :root { --usb-primary: #6e2fd2; --usb-primary-dark: #5f28b8; --usb-primary-fg: #ffffff; --usb-gold: #ffb700; --usb-dark: #1a0a3d; --usb-bg: #ffffff; --usb-fg: #111111; --usb-muted: #666666; --usb-border: #e7e3f0; --usb-surface: #f5f4f2; --usb-lavender: #f0ecff; --usb-font-display: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --usb-font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --usb-font-serif: "Merriweather", ui-serif, Georgia, serif; --usb-max: 1280px; } /* --- Réinitialisations locales ------------------------------------------- Bootstrap impose des styles globaux ; on les neutralise dans nos blocs. */ .usb-header *, .usb-footer *, .usb-main * { box-sizing: border-box; } .usb-header ul, .usb-footer ul { margin: 0; padding: 0; list-style: none; } .usb-shell { margin: 0 auto; max-width: var(--usb-max); padding: 0 16px; width: 100%; } @media (min-width: 640px) { .usb-shell { padding: 0 24px; } } /* --- Neutralisation des règles de l'ancien thème ------------------------- app.css déclare #page-content-wrapper{position:absolute} pour compenser l'ancien header fixe (navbar-fixed-top). Notre header est `sticky`, donc dans le flux : on remet le wrapper en statique, sinon le contenu se superpose et le footer remonte. */ #page-content-wrapper { position: static !important; margin-right: 0 !important; } #wrapper { padding-left: 0 !important; } /* app.css (Bootstrap 3) impose `html{font-size:10px}`. Nos blocs sont dimensionnés en rem sur une base de 16px : sans correctif, tout s'affiche à 62,5% de la taille prévue. On rétablit la base 16px sur nos conteneurs via `font-size: 25.6px` (1.6 x 10px = 16px), puis on bascule les enfants en `em`-safe : les rem internes restent relatifs à , donc on redéfinit plutôt une échelle locale avec --usb-base. */ .usb-header, .usb-footer, .usb-main, .usb-drawer { font-size: 16px; } /* app.css applique des styles globaux agressifs hérités de l'ancien thème : main{margin-top:100px} -> décale toute la page section{padding:14px 0;background:#1e2d2f} -> fond sombre + padding parasite p{font-size:75%;line-height:0} -> texte rabougri et interligne nul On les annule dans nos blocs (sans toucher app.css, utilisé par les 69 autres templates). */ /* app.css déclare main{margin-top:100px} puis main{margin-top:128px} pour compenser l'ancien header `navbar-fixed-top` (hors flux). Notre header est `sticky`, donc dans le flux : cette marge laisse un vide sous le header sur TOUTES les pages (home ET pages intérieures conservées). On l'annule globalement — le décalage n'a plus de raison d'être. */ main { margin-top: 0 !important; } .usb-main section:not([class*="usb-"]), .usb-header section:not([class*="usb-"]), .usb-footer section:not([class*="usb-"]) { padding: 0; background-color: transparent; } .usb-main p, .usb-header p, .usb-footer p { font-size: inherit; line-height: 1.7; position: static; vertical-align: baseline; margin: 0; } .usb-main h1, .usb-main h2, .usb-main h3, .usb-footer h1, .usb-footer h2, .usb-footer h3 { /* app.css impose sur les titres : h1,h2,...{font-family:inherit;font-weight:500;line-height:1.1;color:inherit} h1{font-family:"Roboto Slab",serif;color:#fff} h2{text-transform:uppercase} h1,h2,h3{margin-top:22px;margin-bottom:11px} On rétablit la typographie de la maquette. Les valeurs précises (taille, graisse, couleur) sont redéfinies plus bas par .usb-h1/.usb-h2, ici on neutralise seulement ce qui viendrait d'app.css. */ font-family: var(--usb-font-display); text-transform: none; padding: 0; margin: 0; } /* ========================================================================= HEADER ========================================================================= */ .usb-header { position: sticky; top: 0; z-index: 1050; background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid var(--usb-border); font-family: var(--usb-font-body); transition: box-shadow 0.3s ease, background-color 0.3s ease; } @supports (backdrop-filter: blur(8px)) { .usb-header { backdrop-filter: blur(8px); } } .usb-header.is-scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .usb-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 auto; max-width: var(--usb-max); padding: 16px; } @media (min-width: 640px) { .usb-header-inner { padding: 20px 24px; } } @media (min-width: 1024px) { .usb-header-inner { padding: 24px 32px; } } .usb-logo { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; } .usb-logo img { height: 56px; width: auto; display: block; } @media (min-width: 640px) { .usb-logo img { height: 64px; } } @media (min-width: 768px) { .usb-logo img { height: 80px; } } /* --- Navigation principale (desktop) --- */ .usb-nav { display: none; align-items: center; gap: 24px; } @media (min-width: 1024px) { .usb-nav { display: flex; gap: 32px; } } @media (min-width: 1280px) { .usb-nav { gap: 40px; } } .usb-nav a { position: relative; font-size: 14px; font-weight: 500; color: rgba(17, 17, 17, 0.8); text-decoration: none; transition: color 0.2s ease; } .usb-nav a:hover, .usb-nav a:focus { color: var(--usb-primary); text-decoration: none; } .usb-nav a.is-active { font-weight: 600; color: var(--usb-primary); } .usb-nav a.is-active::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: var(--usb-primary); } /* --- Actions à droite --- */ .usb-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-shrink: 0; } .usb-cta { display: none; align-items: center; gap: 8px; padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--usb-primary-fg); background: var(--usb-primary); border-radius: 2px; text-decoration: none; transition: background-color 0.2s ease; } @media (min-width: 1024px) { .usb-cta { display: inline-flex; } } .usb-cta:hover, .usb-cta:focus { background: var(--usb-primary-dark); color: var(--usb-primary-fg); text-decoration: none; } .usb-burger { display: inline-flex; align-items: center; justify-content: center; height: 40px; width: 40px; flex-shrink: 0; background: transparent; border: 1px solid var(--usb-border); color: var(--usb-dark); font-size: 18px; line-height: 1; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .usb-burger:hover { border-color: var(--usb-primary); color: var(--usb-primary); } @media (min-width: 1024px) { .usb-burger { display: none; } } /* --- Bandeau mobile : section courante --- */ .usb-crumb { overflow: hidden; max-height: 0; opacity: 0; border-top: 1px solid rgba(231, 227, 240, 0.6); transition: max-height 0.3s ease, opacity 0.3s ease; } .usb-crumb.is-visible { max-height: 32px; opacity: 1; } @media (min-width: 1024px) { .usb-crumb { display: none; } } .usb-crumb-inner { display: flex; align-items: center; gap: 8px; margin: 0 auto; max-width: var(--usb-max); padding: 4px 16px; } .usb-crumb-dot { height: 6px; width: 6px; flex-shrink: 0; border-radius: 9999px; background: var(--usb-primary); } .usb-crumb-label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(17, 17, 17, 0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Tiroir mobile --- */ .usb-drawer { position: fixed; inset: 0; z-index: 1060; display: none; } .usb-drawer.is-open { display: block; } @media (min-width: 1024px) { .usb-drawer { display: none !important; } } .usb-drawer-backdrop { position: absolute; inset: 0; background: rgba(26, 10, 61, 0.5); } .usb-drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(320px, 85vw); background: var(--usb-bg); padding: 24px; overflow-y: auto; box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15); } .usb-drawer-head { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 24px; } .usb-drawer-close { height: 40px; width: 40px; background: transparent; border: 1px solid var(--usb-border); color: var(--usb-dark); font-size: 18px; cursor: pointer; } .usb-drawer-panel nav a { display: block; padding: 14px 0; font-size: 16px; font-weight: 500; color: var(--usb-fg); border-bottom: 1px solid var(--usb-border); text-decoration: none; } .usb-drawer-panel nav a:hover { color: var(--usb-primary); } .usb-drawer-cta { display: block; margin-top: 24px; padding: 14px 20px; text-align: center; font-size: 14px; font-weight: 600; color: var(--usb-primary-fg); background: var(--usb-primary); text-decoration: none; } .usb-drawer-cta:hover { background: var(--usb-primary-dark); color: var(--usb-primary-fg); } /* ========================================================================= FOOTER ========================================================================= */ .usb-footer { background: var(--usb-dark); color: rgba(255, 255, 255, 0.85); font-family: var(--usb-font-body); } .usb-footer-rule { display: block; height: 2px; background: var(--usb-gold); } .usb-footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin: 0 auto; max-width: var(--usb-max); padding: 56px 16px; } @media (min-width: 640px) { .usb-footer-grid { padding: 80px 24px; } } @media (min-width: 1024px) { .usb-footer-grid { grid-template-columns: 7fr 5fr; gap: 64px; } } .usb-footer-logo img { height: 48px; width: auto; display: block; } @media (min-width: 640px) { .usb-footer-logo img { height: 56px; } } .usb-footer-intro { margin-top: 24px; max-width: 384px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); } .usb-footer-address { margin-top: 24px; font-size: 14px; font-style: normal; color: rgba(255, 255, 255, 0.6); line-height: 1.7; } .usb-footer-address .usb-strong { padding-top: 12px; color: rgba(255, 255, 255, 0.9); word-break: break-word; } /* app.css colore les : on force la lisibilité sur fond sombre. */ .usb-footer-address a { color: rgba(255, 255, 255, 0.9); text-decoration: none; } .usb-footer-address a:hover, .usb-footer-address a:focus { color: var(--usb-gold); text-decoration: none; } .usb-footer-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--usb-gold); } .usb-footer-note { margin-top: 24px; max-width: 384px; font-size: 14px; color: rgba(255, 255, 255, 0.7); } /* Newsletter — habille le formulaire existant (validate.form.js) */ .usb-newsletter { margin-top: 16px; max-width: 384px; } .usb-newsletter .usb-fields { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: 8px; } .usb-newsletter input[type="text"], .usb-newsletter input[type="email"] { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; box-shadow: none; color: #fff; font-size: 14px; padding: 0; height: auto; } .usb-newsletter input::placeholder { color: rgba(255, 255, 255, 0.4); } .usb-newsletter input:focus { outline: none; box-shadow: none; } .usb-newsletter button { flex-shrink: 0; background: transparent; border: 0; color: var(--usb-gold); font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; } /* Retour d'inscription newsletter (rempli par unisab-newsletter.js) */ .usb-newsletter-msg { margin: 10px 0 0; min-height: 1em; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); } .usb-newsletter-msg.is-success { color: var(--usb-gold); } .usb-newsletter-msg.is-error { color: #ff9b9b; } .usb-newsletter-msg.is-pending { color: rgba(255, 255, 255, 0.6); } .usb-newsletter button[disabled] { opacity: 0.5; cursor: default; } /* Libellé réservé aux lecteurs d'écran */ .usb-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .usb-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); } .usb-footer-bottom-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 auto; max-width: var(--usb-max); padding: 20px 16px; font-size: 12px; color: rgba(255, 255, 255, 0.5); } @media (min-width: 640px) { .usb-footer-bottom-inner { flex-direction: row; align-items: center; gap: 16px; padding: 24px; } } .usb-footer-links { display: flex; flex-wrap: wrap; gap: 16px; } @media (min-width: 640px) { .usb-footer-links { gap: 24px; } } .usb-footer-links a { color: rgba(255, 255, 255, 0.5); text-decoration: none; } .usb-footer-links a:hover { color: #fff; text-decoration: none; } /* ========================================================================= HOME — sections portées de la maquette ========================================================================= */ .usb-main { font-family: var(--usb-font-body); color: var(--usb-fg); } .usb-main img { max-width: 100%; height: auto; } .usb-section { position: relative; overflow: hidden; padding: 64px 0; } @media (min-width: 640px) { .usb-section { padding: 80px 0; } } @media (min-width: 1024px) { .usb-section { padding: 112px 0; } } .usb-section--surface { background: var(--usb-surface); } .usb-section--dark { background: var(--usb-dark); color: #fff; } .usb-section--primary { background: var(--usb-primary); color: #fff; } .usb-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 1024px) { /* La maquette utilise une grille 12 colonnes (Tailwind lg:grid-cols-12) et non des fractions 7fr/5fr : les gouttières internes changent la largeur finale des colonnes. On reproduit la grille 12 colonnes. */ .usb-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 64px; } .usb-grid--7-5 > *:first-child { grid-column: span 7; } .usb-grid--7-5 > *:last-child { grid-column: span 5; } .usb-grid--5-7 > *:first-child { grid-column: span 5; } .usb-grid--5-7 > *:last-child { grid-column: span 7; } .usb-grid--6-6 > *:first-child { grid-column: span 6; } .usb-grid--6-6 > *:last-child { grid-column: span 6; } .usb-grid--center { align-items: center; } /* hero : lg:gap-14 = 56px (les autres sections utilisent lg:gap-16 = 64px) */ .usb-hero-grid { gap: 56px; } } .usb-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--usb-primary); } .usb-eyebrow-dot { display: inline-block; height: 8px; width: 8px; background: var(--usb-primary); } .usb-eyebrow--gold { color: var(--usb-gold); } .usb-eyebrow--gold .usb-eyebrow-dot { background: var(--usb-gold); } .usb-rule { display: block; height: 2px; background: var(--usb-gold); } /* En-tête de section : titre à gauche, filet doré aligné en bas à droite (maquette : flex + justify-between + items-end, filet masqué < 768px). */ .usb-section-head { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; } @media (min-width: 768px) { .usb-section-head { flex-direction: row; align-items: flex-end; } } .usb-rule--head { display: none; } @media (min-width: 768px) { .usb-rule--head { display: block; width: 160px; flex-shrink: 0; margin-bottom: 8px; } } .usb-main .usb-h1, .usb-h1 { font-family: var(--usb-font-display); font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.025em; color: var(--usb-dark); margin: 0; } @media (min-width: 640px) { .usb-main .usb-h1, .usb-h1 { font-size: 48px; } } @media (min-width: 768px) { .usb-main .usb-h1, .usb-h1 { font-size: 60px; } } @media (min-width: 1024px) { .usb-main .usb-h1, .usb-h1 { font-size: 72px; } } .usb-h1 .usb-accent { color: var(--usb-primary); } .usb-h1 .usb-italic { font-style: italic; color: rgba(26, 10, 61, 0.8); } .usb-main .usb-h2, .usb-footer .usb-h2, .usb-h2 { font-family: var(--usb-font-display); font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--usb-dark); margin: 24px 0 0; } @media (min-width: 640px) { .usb-main .usb-h2, .usb-h2 { font-size: 36px; } } @media (min-width: 1024px) { .usb-main .usb-h2, .usb-h2 { font-size: 48px; } } .usb-section--dark .usb-h2, .usb-section--primary .usb-h2 { color: #fff; } .usb-main .usb-lead, .usb-lead { margin-top: 24px; max-width: 576px; font-size: 16px; line-height: 1.625; /* Tailwind leading-relaxed */ color: var(--usb-muted); } @media (min-width: 640px) { .usb-main .usb-lead, .usb-lead { margin-top: 32px; font-size: 18px; } } .usb-section--dark .usb-lead { color: rgba(255, 255, 255, 0.7); } .usb-section--primary .usb-lead { color: rgba(255, 255, 255, 0.85); } .usb-link-gold { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 2px solid var(--usb-gold); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--usb-dark); text-decoration: none; } @media (min-width: 640px) { .usb-link-gold { font-size: 14px; } } .usb-link-gold:hover, .usb-link-gold:focus { color: var(--usb-primary); text-decoration: none; } /* --- Hero --- */ .usb-hero-grid { padding-top: 48px; padding-bottom: 64px; } @media (min-width: 640px) { .usb-hero-grid { padding-top: 64px; padding-bottom: 80px; } } @media (min-width: 1024px) { .usb-hero-grid { padding-top: 96px; padding-bottom: 96px; } } .usb-deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; } .usb-deco--u { width: clamp(176px, 55vw, 832px); top: clamp(-32px, -4vw, -64px); right: clamp(-32px, -4vw, -64px); opacity: 0.4; animation: usb-letter-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes usb-letter-reveal { 0% { opacity: 0; transform: scale(0.85) translateY(32px); } 100% { opacity: 0.4; transform: scale(1) translateY(0); } } .usb-deco--n { width: clamp(160px, 42vw, 608px); bottom: clamp(-32px, -3vw, -64px); left: clamp(-24px, -3vw, -48px); opacity: 0.12; } .usb-deco--s { width: clamp(176px, 48vw, 704px); top: clamp(-16px, -2vw, -32px); right: clamp(-16px, -2vw, -32px); opacity: 0.06; filter: brightness(0) invert(1); } .usb-deco--a { width: clamp(192px, 55vw, 832px); top: clamp(-32px, -4vw, -64px); left: clamp(-16px, -2vw, -32px); opacity: 0.1; } .usb-deco--b { width: clamp(192px, 60vw, 896px); top: clamp(-48px, -6vw, -96px); right: clamp(-32px, -4vw, -64px); opacity: 0.1; filter: brightness(0) invert(1); } .usb-relative { position: relative; z-index: 1; } .usb-figure { position: relative; } .usb-figure img { display: block; width: 100%; object-fit: cover; } .usb-figure--portrait img { aspect-ratio: 4 / 5; } .usb-figure--landscape img { aspect-ratio: 4 / 3; } .usb-figure-rule { position: absolute; bottom: -12px; left: 32px; right: 32px; height: 2px; background: var(--usb-gold); } .usb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; max-width: 512px; border-top: 1px solid var(--usb-border); padding-top: 24px; } @media (min-width: 640px) { .usb-stats { margin-top: 64px; gap: 24px; padding-top: 32px; } } .usb-stat-value { font-family: var(--usb-font-display); font-size: 20px; font-weight: 800; color: var(--usb-primary); } @media (min-width: 640px) { .usb-stat-value { font-size: 24px; } } @media (min-width: 768px) { .usb-stat-value { font-size: 30px; } } .usb-stat-label { margin-top: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--usb-muted); } @media (min-width: 640px) { .usb-stat-label { font-size: 14px; } } .usb-quote-card { margin-top: 24px; border: 1px solid var(--usb-border); background: var(--usb-lavender); padding: 20px; } @media (min-width: 640px) { .usb-quote-card { padding: 24px; } } .usb-quote-card-inner { display: flex; align-items: flex-start; gap: 16px; } .usb-quote-card-dot { margin-top: 4px; height: 12px; width: 12px; flex-shrink: 0; background: #2ec4b6; } .usb-quote-card p { font-family: var(--usb-font-serif); font-style: italic; font-size: 14px; line-height: 1.7; color: var(--usb-dark); margin: 0; } @media (min-width: 640px) { .usb-quote-card p { font-size: 16px; } } /* --- Mission strip --- */ .usb-strip { border-top: 1px solid var(--usb-border); border-bottom: 1px solid var(--usb-border); background: var(--usb-dark); color: #fff; padding: 20px 0; } @media (min-width: 640px) { .usb-strip { padding: 24px 0; } } .usb-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; margin: 0 auto; max-width: var(--usb-max); padding: 0 16px; } @media (min-width: 640px) { .usb-strip-inner { gap: 12px 40px; padding: 0 24px; } } .usb-strip-item { display: flex; align-items: center; gap: 12px; } .usb-strip-item span:first-child { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.9); } @media (min-width: 640px) { .usb-strip-item span:first-child { font-size: 14px; letter-spacing: 0.2em; } } .usb-strip-sep { display: none; height: 6px; width: 6px; background: var(--usb-gold); } @media (min-width: 640px) { .usb-strip-sep { display: inline-block; } } /* --- About --- */ .usb-about-figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; } @media (min-width: 640px) { .usb-about-figures { gap: 24px; } } .usb-about-figure { border-left: 2px solid var(--usb-primary); padding-left: 16px; } @media (min-width: 640px) { .usb-about-figure { padding-left: 20px; } } .usb-about-figure-v { font-family: var(--usb-font-display); font-size: 20px; font-weight: 800; color: var(--usb-dark); } @media (min-width: 640px) { .usb-about-figure-v { font-size: 24px; } } .usb-about-figure-l { margin-top: 4px; font-size: 12px; color: var(--usb-muted); } @media (min-width: 640px) { .usb-about-figure-l { font-size: 14px; } } .usb-main .usb-body, .usb-body { font-size: 16px; line-height: 1.625; /* Tailwind leading-relaxed */ color: rgba(17, 17, 17, 0.85); } @media (min-width: 640px) { .usb-main .usb-body, .usb-body { font-size: 18px; } } /* --- Pillars --- */ .usb-pillars { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 40px; border: 1px solid var(--usb-border); background: var(--usb-border); overflow: hidden; } @media (min-width: 640px) { .usb-pillars { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .usb-pillars { grid-template-columns: repeat(4, 1fr); margin-top: 64px; } } .usb-pillar { display: flex; flex-direction: column; justify-content: space-between; background: var(--usb-bg); padding: 24px; transition: background-color 0.2s ease; } @media (min-width: 640px) { .usb-pillar { padding: 32px; } } .usb-pillar:hover { background: var(--usb-surface); } .usb-pillar-head { display: flex; align-items: center; gap: 12px; } .usb-pillar-dot { display: inline-block; height: 8px; width: 8px; background: var(--usb-gold); } .usb-pillar-n { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--usb-primary); } .usb-pillar h3 { font-family: var(--usb-font-display); font-size: 20px; font-weight: 800; color: var(--usb-dark); margin: 20px 0 0; } @media (min-width: 640px) { .usb-pillar h3 { margin-top: 24px; font-size: 24px; } } .usb-pillar p { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--usb-muted); } .usb-pillar-arrow { display: inline-flex; align-items: center; justify-content: center; margin-top: 32px; height: 40px; width: 40px; background: rgba(110, 47, 210, 0.1); color: var(--usb-primary); transition: background-color 0.2s ease, color 0.2s ease; } .usb-pillar:hover .usb-pillar-arrow { background: var(--usb-primary); color: #fff; } /* --- Members --- */ .usb-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 32px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } @media (min-width: 640px) { .usb-cats { grid-template-columns: repeat(3, 1fr); margin-top: 40px; } } .usb-cat { background: var(--usb-dark); padding: 20px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.9); } @media (min-width: 640px) { .usb-cat { padding: 24px 20px; font-size: 14px; } } /* --- Manifesto --- */ .usb-manifesto { max-width: 896px; margin: 0 auto; text-align: center; padding: 0 16px; } @media (min-width: 640px) { .usb-manifesto { padding: 0 24px; } } .usb-manifesto-dot { display: inline-block; height: 8px; width: 8px; background: var(--usb-gold); } .usb-manifesto blockquote { font-family: var(--usb-font-serif); font-style: italic; font-size: 24px; line-height: 1.3; color: var(--usb-dark); margin: 32px 0 0; padding: 0; border: 0; } @media (min-width: 640px) { .usb-manifesto blockquote { font-size: 30px; } } @media (min-width: 768px) { .usb-manifesto blockquote { font-size: 36px; } } @media (min-width: 1024px) { .usb-manifesto blockquote { font-size: 48px; } } .usb-manifesto-sign { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; } @media (min-width: 640px) { .usb-manifesto-sign { margin-top: 40px; gap: 16px; } } .usb-manifesto-sign span:first-child, .usb-manifesto-sign span:last-child { height: 2px; width: 32px; background: var(--usb-gold); } @media (min-width: 640px) { .usb-manifesto-sign span:first-child, .usb-manifesto-sign span:last-child { width: 40px; } } .usb-manifesto-sign div { font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--usb-primary); } @media (min-width: 640px) { .usb-manifesto-sign div { font-size: 14px; } } /* --- News --- */ .usb-news { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 40px; } @media (min-width: 640px) { .usb-news { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .usb-news { grid-template-columns: repeat(3, 1fr); margin-top: 64px; } } .usb-news-item { display: flex; flex-direction: column; border-top: 2px solid var(--usb-dark); padding-top: 24px; transition: border-color 0.2s ease; } .usb-news-item:hover { border-color: var(--usb-primary); } .usb-news-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; } @media (min-width: 640px) { .usb-news-meta { font-size: 12px; } } .usb-news-tag { font-weight: 600; color: var(--usb-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .usb-news-date { flex-shrink: 0; color: var(--usb-muted); } .usb-news-thumb { margin-top: 16px; display: block; } .usb-news-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .usb-news-item h3 { font-family: var(--usb-font-display); font-size: 18px; font-weight: 800; line-height: 1.3; margin: 16px 0 0; } @media (min-width: 640px) { .usb-news-item h3 { font-size: 20px; } } .usb-news-item h3 a { color: var(--usb-dark); text-decoration: none; } .usb-news-item h3 a:hover { color: var(--usb-primary); text-decoration: none; } .usb-news-excerpt { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--usb-muted); } .usb-news-excerpt p { margin: 0; } .usb-news-more { margin-top: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--usb-primary); text-decoration: none; } .usb-news-more:hover { text-decoration: none; color: var(--usb-primary-dark); } /* --- Join --- */ .usb-join-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--usb-gold); } .usb-join-card { border: 1px solid rgba(255, 255, 255, 0.15); background: var(--usb-dark); padding: 20px; } @media (min-width: 640px) { .usb-join-card { padding: 32px; } } .usb-join-card h3 { font-family: var(--usb-font-display); font-size: 18px; font-weight: 800; color: #fff; margin: 0; } @media (min-width: 640px) { .usb-join-card h3 { font-size: 20px; } } .usb-join-card img { margin-top: 24px; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; } @media (min-width: 640px) { .usb-join-card img { margin-top: 32px; } } .usb-join-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; background: var(--usb-gold); padding: 14px 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--usb-dark); text-decoration: none; transition: transform 0.2s ease; } @media (min-width: 640px) { .usb-join-btn { padding: 16px 24px; font-size: 14px; } } .usb-join-btn:hover { transform: translateY(-2px); color: var(--usb-dark); text-decoration: none; } /* ========================================================================= Charte UNISAB : le thème historique décline le jaune #ffe401 en 13 nuances (états survol, bordures de boutons, dégradé décoratif de .sidebar-nav). Chacune est transposée vers la teinte orange #ffb700 en conservant sa luminosité, pour que les dégradés et les états restent cohérents. Le orange Bootstrap .btn-warning (#f0ad4e) n'est PAS touché : ce n'est pas une couleur de marque. app.css n'ayant aucune variable CSS, les règles sont redéclarées ici. ========================================================================= */ .text-primary { color:#ffb700 !important; } .bg-primary { background-color:#ffb700 !important; } .btn-primary { background-color:#ffb700 !important; border-color:#e7a600 !important; } .btn-primary.disabled:hover,.btn-primary.disabled:focus,.btn-primary.disabled.focus,.btn-primary[disabled]:hover,.btn-primary[disabled]:focus,.btn-primary[disabled].focus,fieldset[disabled] .btn-primary:hover,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary.focus { background-color:#ffb700 !important; border-color:#e7a600 !important; } .btn-primary .badge { color:#ffb700 !important; } .dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus { background-color:#ffb700 !important; } .nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus { background-color:#ffb700 !important; } .pagination>.active>a,.pagination>.active>a:hover,.pagination>.active>a:focus,.pagination>.active>span,.pagination>.active>span:hover,.pagination>.active>span:focus { background-color:#ffb700 !important; border-color:#ffb700 !important; } .label-primary { background-color:#ffb700 !important; } .progress-bar { background-color:#ffb700 !important; } .list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus { background-color:#ffb700 !important; border-color:#ffb700 !important; } .panel-primary { border-color:#ffb700 !important; } .panel-primary>.panel-heading { background-color:#ffb700 !important; border-color:#ffb700 !important; } .panel-primary>.panel-heading+.panel-collapse>.panel-body { border-top-color:#ffb700 !important; } .panel-primary>.panel-heading .badge { color:#ffb700 !important; } .panel-primary>.panel-footer+.panel-collapse>.panel-body { border-bottom-color:#ffb700 !important; } .btn-border { background-color:#ffb700 !important; } .btn-slider:hover { background-color:#ffb700 !important; } .btn-link { background-color:#ffb700 !important; } .btn-modal { background-color:#ffb700 !important; } .filter button { background-color:#ffb700 !important; } .sidebar-nav li:first-child a { background-color:#ffb700 !important; } .header .top { background-color:#ffb700 !important; } .slider-form form button,.slider-home form button,.slider-norme form button,.slider-produit form button,.slider-extranet-home form button { background-color:#ffb700 !important; } .home-actu .hom-actu-img img { -moz-box-shadow:-32px 17px 0 0 #ffb700 !important; -webkit-box-shadow:-32px 17px 0 0 #ffb700 !important; box-shadow:-32px 17px 0 0 #ffb700 !important; } .home-map form { background-color:#ffb700 !important; } .contact-map .contact-map-info { background-color:#ffb700 !important; } .produit .nav-pills li.active:hover>a { background-color:#ffb700 !important; } .extranet-menu nav li.active,.extranet-menu nav li:hover { border-top:solid 5px #ffb700 !important; } .ex-form-search button { background-color:#ffb700 !important; } .header .nav-primary li a:hover { border-bottom:solid 10px #ffb700 !important; } .header .nav-primary li a.active { border-bottom:solid 10px #ffb700 !important; } .header .nav-primary li ul { border:solid 2px #ffb700 !important; } .header .nav-primary li ul li a:hover,.header .nav-primary li ul li:first-child a:hover { color:#ffb700 !important; } .header-search-form { background-color:#ffb700 !important; } a.text-primary:hover,a.text-primary:focus { color:#cd9300 !important; } a.bg-primary:hover,a.bg-primary:focus { background-color:#cd9300 !important; } .btn-primary:focus,.btn-primary.focus { background-color:#cd9300 !important; } .btn-primary:hover { background-color:#cd9300 !important; border-color:#a97900 !important; } .btn-primary:active,.btn-primary.active,.open>.btn-primary.dropdown-toggle { background-color:#cd9300 !important; border-color:#a97900 !important; } .label-primary[href]:hover,.label-primary[href]:focus { background-color:#cd9300 !important; } .sidebar-nav li:nth-child(6):before { background-color:#cd9300 !important; } .btn-border:hover { background-color:#e7a600 !important; } .btn-link:hover { background-color:#e7a600 !important; } .btn-modal:hover { background-color:#e7a600 !important; } .filter button:hover { background-color:#f1ad00 !important; } .slider-form form button:hover,.slider-home form button:hover,.slider-norme form button:hover,.slider-produit form button:hover,.slider-extranet-home form button:hover { background-color:#f1ad00 !important; } .ex-form-search button:hover { background-color:#f1ad00 !important; } .sidebar-nav li:nth-child(2):before { background-color:#f6b100 !important; } .sidebar-nav li:nth-child(3):before { background-color:#eca900 !important; } .sidebar-nav li:nth-child(4):before { background-color:#e1a100 !important; } .sidebar-nav li:nth-child(5):before { background-color:#d79a00 !important; } .sidebar-nav li:nth-child(7):before { background-color:#c38c00 !important; } .sidebar-nav li:nth-child(8):before { background-color:#b98500 !important; } .sidebar-nav li:nth-child(9):before { background-color:#ae7d00 !important; } .sidebar-nav li:nth-child(10):before { background-color:#a47600 !important; } .btn-primary:active:hover,.btn-primary:active:focus,.btn-primary:active.focus,.btn-primary.active:hover,.btn-primary.active:focus,.btn-primary.active.focus,.open>.btn-primary.dropdown-toggle:hover,.open>.btn-primary.dropdown-toggle:focus,.open>.btn-primary.dropdown-toggle.focus { background-color:#a97900 !important; } /* ========================================================================= Harmonisation typographique : le thème historique utilise "Roboto Slab" (serif) sur 21 règles. On le remplace par les polices de la maquette : - titres -> police de .usb-h2 (var(--usb-font-display), Inter) - autres -> police de .usb-body (var(--usb-font-body), DM Sans) app.css n'est pas modifié : il sert les 69 autres templates. ========================================================================= */ /* Titres */ h1, .title-in-block, .home-title-section .home-title-section-this, .contact-form h2, .qsn-edito h1, .qsn-title,.qsn-title-up,.qsn-title-up-light, .ex-title-section,.ex-title-page,.ex-title-section-light, .ex-home-bloc-1 h3,.ex-home-bloc-2 h3 { font-family: var(--usb-font-display) !important; } /* Textes courants */ .page-intro, .header .logo div, .header .top li, .footer-top .logo-text, .footer-top .title, .home-discover p, .home-newsletter label, .contact-map-container .logo-text, .qsn-read-more a div, .qsn-edito-sep, .extranet-menu nav li, .ex-next-date article .ex-date .date, .ex-form label { font-family: var(--usb-font-body) !important; }