/* ============================================================ AISkillsPro — Editorial CSS Helper (2026-04-28) Hébergé en ir.attachment public, injecté dans via vue inherit website.layout. Convention : toutes les classes sont préfixées .aip-* pour éviter d'écraser Bootstrap. Sélecteurs scopés au .aip-page wrapper quand pertinent. ============================================================ */ /* --- Variables (palette + spacings) --- */ :root { --aip-navy: #0A1628; --aip-navy-soft: #14304F; --aip-cyan: #5BC0DE; --aip-gold: #F9C846; --aip-paper: #F8F9FA; --aip-ink: #0A1628; --aip-ink-soft: #4A5568; --aip-ink-muted: #6c757d; --aip-rule: rgba(10,22,40,0.12); --aip-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --aip-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --aip-font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace; } /* --- Application typo globale (sans casser Bootstrap) --- */ body, .aip-body { font-family: var(--aip-font-sans); color: var(--aip-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--aip-font-sans); color: var(--aip-ink); letter-spacing: -0.02em; } h1, .h1 { font-weight: 700; } h2, .h2 { font-weight: 700; } h3, .h3 { font-weight: 600; } em, i { font-family: var(--aip-font-serif); font-style: italic; font-weight: 400; } /* === Réduction des spacings excessifs (Bootstrap pt96 pb96) === */ .aip-section, section.s_text_block.aip-section { padding-top: 4rem !important; /* 64px */ padding-bottom: 3rem !important;/* 48px */ } .aip-section-tight, section.s_text_block.aip-section-tight { padding-top: 3rem !important; /* 48px */ padding-bottom: 2rem !important;/* 32px */ } .aip-section-hero { padding-top: 4.5rem !important; /* 72px */ padding-bottom: 3rem !important; } /* Compaction sur mobile */ @media (max-width: 767px) { .aip-section, .aip-section-tight, .aip-section-hero { padding-top: 2.5rem !important; padding-bottom: 2rem !important; } } /* === Eyebrow (petite typo monospace au-dessus des titres) === */ .aip-eyebrow { font-family: var(--aip-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--aip-ink-muted); margin-bottom: 0.75rem; display: inline-block; } .aip-eyebrow--cyan { color: var(--aip-cyan); } .aip-eyebrow--gold { color: var(--aip-gold); } /* Petit filet horizontal éditorial */ .aip-rule { width: 60px; height: 1px; background: linear-gradient(to right, var(--aip-cyan), transparent); border: none; margin: 0 0 1.5rem 0; } .aip-rule--gold { background: linear-gradient(to right, var(--aip-gold), transparent); } .aip-rule--center { margin-left: auto; margin-right: auto; background: linear-gradient(to right, transparent, var(--aip-cyan), transparent); } /* === Bandeau metadata (style cover) === */ .aip-meta { display: inline-flex; align-items: center; gap: 0.85rem; font-family: var(--aip-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--aip-ink-muted); } .aip-meta__dot { width: 5px; height: 5px; background: var(--aip-cyan); border-radius: 50%; } .aip-meta__num { color: var(--aip-gold); } /* === Drop Cap (capitale ornée première lettre) === */ .aip-dropcap::first-letter { font-family: var(--aip-font-serif); font-style: italic; font-weight: 400; font-size: 4.8em; line-height: 0.85; float: left; padding: 0.05em 0.12em 0 0; color: var(--aip-cyan); text-shadow: 1px 1px 0 rgba(91,192,222,0.1); } /* === Pull Quote (citation éditoriale) === */ .aip-pullquote { margin: 2.5rem 0; padding: 1rem 0 1rem 1.75rem; border-left: 3px solid var(--aip-cyan); font-family: var(--aip-font-serif); font-style: italic; font-weight: 400; font-size: 1.6rem; line-height: 1.4; color: var(--aip-ink); max-width: 90%; } .aip-pullquote--gold { border-left-color: var(--aip-gold); } .aip-pullquote__attr { display: block; margin-top: 0.75rem; font-family: var(--aip-font-mono); font-style: normal; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aip-ink-muted); } /* === Stat bloc (gros chiffre + label) === */ .aip-stat { display: block; line-height: 1; } .aip-stat__num { font-family: var(--aip-font-sans); font-weight: 700; font-size: 3rem; color: var(--aip-cyan); letter-spacing: -0.03em; line-height: 0.95; } .aip-stat__label { display: block; margin-top: 0.4rem; font-family: var(--aip-font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aip-ink-muted); } /* === Pilier number (gros chiffre éditorial) === */ .aip-pilier-num { font-family: var(--aip-font-sans); font-weight: 700; font-size: 2.8rem; line-height: 1; color: var(--aip-cyan); letter-spacing: -0.04em; } .aip-pilier-num--gold { color: var(--aip-gold); } /* === Card éditoriale === */ .aip-card { background: #fff; border: 1px solid rgba(10,22,40,0.08); border-left: 3px solid var(--aip-cyan); border-radius: 4px; padding: 1.5rem 1.5rem 1.4rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .aip-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(10,22,40,0.06); } .aip-card--gold { border-left-color: var(--aip-gold); } .aip-card--neutral { border-left-color: var(--aip-ink-muted); } /* === Hero spécial === */ .aip-hero h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 1.25rem; } .aip-hero h1 em { color: var(--aip-cyan); } .aip-hero .lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.55; color: var(--aip-ink-soft); max-width: 56ch; } /* === Vignettes piliers améliorées === */ .aip-pilier-card { position: relative; overflow: hidden; border-radius: 8px; min-height: 400px; background-size: cover; background-position: center; transition: transform 0.3s ease; text-decoration: none; display: block; color: inherit; } .aip-pilier-card:hover { transform: translateY(-4px); } .aip-pilier-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,22,40,0.88) 0%, rgba(10,22,40,0.45) 60%, rgba(10,22,40,0.25) 100%); z-index: 1; } .aip-pilier-card__inner { position: relative; z-index: 2; padding: 2.5rem 2rem 2rem; color: var(--aip-paper); height: 100%; display: flex; flex-direction: column; } .aip-pilier-card__num { font-family: var(--aip-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; margin-bottom: 1rem; color: var(--aip-cyan); } .aip-pilier-card__num--gold { color: var(--aip-gold); } .aip-pilier-card__title { font-family: var(--aip-font-sans); font-weight: 700; font-size: 2.6rem; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 0.75rem; color: #fff; } .aip-pilier-card__title em { color: var(--aip-cyan); } .aip-pilier-card__title em.gold { color: var(--aip-gold); } .aip-pilier-card__desc { font-size: 1rem; line-height: 1.55; color: rgba(248,249,250,0.85); max-width: 36ch; margin-bottom: 1.5rem; } .aip-pilier-card__cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; background: rgba(255,255,255,0.95); color: var(--aip-ink); border-radius: 30px; font-size: 0.85rem; font-weight: 600; transition: background 0.2s ease; } .aip-pilier-card:hover .aip-pilier-card__cta { background: #fff; } .aip-pilier-card__stats { display: flex; gap: 1.5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.15); } .aip-pilier-card__stat-num { font-family: var(--aip-font-mono); font-size: 0.75rem; color: rgba(248,249,250,0.6); letter-spacing: 0.1em; text-transform: uppercase; } /* === Sidebar info compact === */ .aip-sidebar { background: var(--aip-paper); border: 1px solid rgba(10,22,40,0.08); border-radius: 6px; padding: 1.25rem 1.5rem; } .aip-sidebar__row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--aip-ink-soft); margin-bottom: 0.5rem; } .aip-sidebar__row:last-child { margin-bottom: 0; } .aip-sidebar__row i { color: var(--aip-cyan); width: 1.1rem; } /* === Mantra card === */ .aip-mantra { background: var(--aip-navy); color: var(--aip-paper); border-radius: 8px; padding: 2.5rem 2rem; text-align: center; position: relative; overflow: hidden; } .aip-mantra::before { content: """; position: absolute; top: -2rem; right: 1rem; font-family: var(--aip-font-serif); font-size: 8rem; line-height: 1; color: rgba(91,192,222,0.12); } .aip-mantra__label { font-family: var(--aip-font-mono); font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--aip-cyan); margin-bottom: 1rem; display: block; } .aip-mantra__quote { font-family: var(--aip-font-serif); font-style: italic; font-weight: 300; font-size: 1.7rem; line-height: 1.25; color: #fff; margin: 0; } /* === Breadcrumb éditorial === */ .aip-breadcrumb { font-family: var(--aip-font-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--aip-ink-muted); margin-bottom: 1.25rem; } .aip-breadcrumb a { color: var(--aip-ink-muted); text-decoration: none; } .aip-breadcrumb a:hover { color: var(--aip-cyan); } .aip-breadcrumb__sep { margin: 0 0.5rem; color: var(--aip-cyan); } /* === Form newsletter signature === */ .aip-form { background: #fff; border: 1px solid rgba(10,22,40,0.1); border-radius: 8px; padding: 2rem; } .aip-form input[type="email"] { border: 1px solid rgba(10,22,40,0.15); border-radius: 4px; padding: 0.85rem 1rem; font-size: 1rem; font-family: var(--aip-font-sans); width: 100%; } .aip-form input[type="email"]:focus { outline: none; border-color: var(--aip-cyan); box-shadow: 0 0 0 3px rgba(91,192,222,0.15); } .aip-form .btn { background: var(--aip-navy); color: #fff; border: none; padding: 0.85rem 1.6rem; font-weight: 600; } .aip-form .btn:hover { background: var(--aip-navy-soft); color: #fff; } /* === Section divider === */ .aip-divider { border: none; height: 1px; background: linear-gradient(to right, transparent, var(--aip-rule), transparent); margin: 2rem 0; } /* === Header amélioré (édition / numéro) === */ .aip-header-banner { background: var(--aip-navy); color: rgba(248,249,250,0.7); padding: 0.45rem 0; font-family: var(--aip-font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; } .aip-header-banner span { color: var(--aip-gold); } /* === Article body éditorial (pour blog posts) === */ .aip-article-body p { font-size: 1.08rem; line-height: 1.7; color: var(--aip-ink-soft); margin-bottom: 1.25rem; } .aip-article-body p:first-of-type { font-size: 1.18rem; color: var(--aip-ink); } .aip-article-body h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.6rem; } .aip-article-body h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.25rem; } .aip-article-body blockquote { border-left: 3px solid var(--aip-cyan); padding: 0.5rem 0 0.5rem 1.5rem; margin: 1.5rem 0; font-family: var(--aip-font-serif); font-style: italic; font-size: 1.3rem; color: var(--aip-ink); } /* === Buttons signature === */ .btn.aip-btn-primary, .aip-btn-primary { background: var(--aip-navy); color: var(--aip-paper); border: none; padding: 0.7rem 1.4rem; border-radius: 50px; font-weight: 600; font-size: 0.95rem; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.5rem; } .btn.aip-btn-primary:hover, .aip-btn-primary:hover { background: var(--aip-navy-soft); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(10,22,40,0.12); } .btn.aip-btn-outline, .aip-btn-outline { background: transparent; color: var(--aip-navy); border: 1px solid var(--aip-navy); padding: 0.65rem 1.4rem; border-radius: 50px; font-weight: 600; font-size: 0.95rem; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.5rem; } .btn.aip-btn-outline:hover, .aip-btn-outline:hover { background: var(--aip-navy); color: var(--aip-paper); } /* === Override "Sign in" basique header (peu importe ce qui le rend) === */ /* sign-in button: visible */ /* === Article placeholder (quand pas de post) === */ .aip-empty-blog { text-align: center; padding: 4rem 2rem; background: var(--aip-paper); border-radius: 8px; border: 1px dashed rgba(10,22,40,0.15); margin: 2rem 0; } .aip-empty-blog__title { font-family: var(--aip-font-serif); font-style: italic; font-size: 1.6rem; margin-bottom: 0.75rem; color: var(--aip-ink); } .aip-empty-blog__text { color: var(--aip-ink-soft); font-size: 1rem; max-width: 50ch; margin: 0 auto 1.5rem; } /* === Improvements spacing footer === */ #footer h5 { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aip-ink); margin-bottom: 1.1rem; } #footer ul li a { color: var(--aip-ink-soft); transition: color 0.2s ease; } #footer ul li a:hover { color: var(--aip-cyan); } /* === Hide navbar Search visually if not needed (optional) === */ /* .navbar form[action="/website/search"] { display: none; } */ /* === Responsive tweaks === */ @media (max-width: 991px) { .aip-pilier-card { min-height: 320px; } .aip-pilier-card__title { font-size: 2rem; } }