Wikikab : Page créée avec « /* ============================================================ Modèle:Personnalites kabyles/styles.css TemplateStyles — CSS local à la page Personnalités kabyles ============================================================ */ .wk-people-page { max-width: 1480px; margin: 0 auto; color: #33495d; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.58; } .wk-people-page, .wk-peopl... »

2026-08-08T22:51:07Z

Page créée avec « ============================================================ Modèle:Personnalites kabyles/styles.css TemplateStyles — CSS local à la page Personnalités kabyles ============================================================ : .wk-people-page { max-width: 1480px; margin: 0 auto; color: #33495d; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.58; } .wk-people-page, .wk-peopl... »

Nouvelle page

/* ============================================================
Modèle:Personnalites kabyles/styles.css
TemplateStyles — CSS local à la page Personnalités kabyles
============================================================ */

.wk-people-page {
max-width: 1480px;
margin: 0 auto;
color: #33495d;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.58;
}

.wk-people-page,
.wk-people-page * {
box-sizing: border-box;
}

.wk-people-page a {
text-decoration: none;
}

.wk-people-page h1,
.wk-people-page h2,
.wk-people-page h3 {
margin-top: 0;
color: #13283d;
font-family: Georgia, "Times New Roman", serif;
letter-spacing: -.02em;
}

.wk-people-page p {
margin-top: 0;
}

.wk-people-hero {
position: relative;
display: flex;
min-height: 410px;
align-items: center;
justify-content: space-between;
gap: 40px;
overflow: hidden;
padding: 62px 68px;
border: 1px solid #e4e9ee;
border-radius: 0 0 28px 28px;
background: linear-gradient(135deg, #f8fbfd 0%, #ffffff 58%, #f4f8f5 100%);
}

.wk-people-hero-copy {
position: relative;
z-index: 2;
max-width: 760px;
}

.wk-kicker {
display: inline-block;
color: #258052;
font-size: 11px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}

.wk-people-title {
margin: 12px 0 16px !important;
font-size: 68px;
line-height: 1;
letter-spacing: -.045em !important;
}

.wk-people-lead {
max-width: 690px;
margin-bottom: 0;
color: #617181;
font-size: 17px;
line-height: 1.7;
}

.wk-people-hero-mark {
position: relative;
z-index: 1;
color: #e8f0f5;
font-family: Georgia, "Times New Roman", serif;
font-size: 180px;
font-weight: 800;
line-height: 1;
}

.wk-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 27px;
}

.wk-btn {
display: inline-flex;
min-height: 46px;
align-items: center;
justify-content: center;
padding: 0 21px;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
}

.wk-btn a {
color: inherit !important;
text-decoration: none !important;
}

.wk-btn-primary {
color: #fff;
background: #0b5fa8;
}

.wk-btn-secondary {
color: #083b68;
border: 1px solid #dce6ee;
background: #fff;
}

.wk-btn-white {
color: #083b68;
background: #fff;
}

.wk-btn-outline-white {
color: #fff;
border: 1px solid #6f93b0;
background: #174a72;
}

.wk-people-section {
padding: 72px 20px 0;
}

.wk-people-section-tight {
padding-top: 58px;
}

.wk-section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: 26px;
}

.wk-section-heading h2 {
margin: 7px 0;
font-size: 40px;
line-height: 1.1;
}

.wk-section-heading p {
max-width: 760px;
margin-bottom: 0;
color: #718091;
}

.wk-heading-action {
padding-bottom: 5px;
white-space: nowrap;
font-size: 13px;
font-weight: 700;
}

.wk-people-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
overflow: hidden;
border: 1px solid #e5e9ee;
border-radius: 20px;
background: #fff;
}

.wk-people-stat {
padding: 22px 24px;
border-right: 1px solid #e5e9ee;
}

.wk-people-stat:last-child {
border-right: 0;
}

.wk-people-stat strong,
.wk-people-stat span {
display: block;
}

.wk-people-stat strong {
color: #13283d;
font-family: Georgia, "Times New Roman", serif;
font-size: 24px;
}

.wk-people-stat span {
margin-top: 4px;
color: #718091;
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}

.wk-topic-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}

.wk-topic-card {
position: relative;
display: grid;
min-height: 210px;
grid-template-columns: auto 1fr;
gap: 16px;
padding: 24px 24px 20px;
overflow: hidden;
border: 1px solid #e5e9ee;
border-radius: 20px;
background: #fff;
}

.wk-topic-icon {
display: flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border: 1px solid #e5e9ee;
border-radius: 12px;
background: #f6f8fa;
color: #13283d;
font-family: Georgia, "Times New Roman", serif;
font-weight: 800;
}

.wk-topic-label {
margin-bottom: 5px;
color: #718091;
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}

.wk-topic-card h3 {
margin-bottom: 9px;
font-size: 19px;
line-height: 1.18;
}

.wk-topic-card p {
margin-bottom: 0;
color: #718091;
font-size: 13px;
line-height: 1.55;
}

.wk-topic-arrow {
position: absolute;
right: 20px;
bottom: 17px;
font-weight: 800;
}

.wk-accent-blue { border-top: 3px solid #0b5fa8; }
.wk-accent-green { border-top: 3px solid #258052; }
.wk-accent-gold { border-top: 3px solid #d49a1f; }
.wk-accent-red { border-top: 3px solid #c95b3c; }

.wk-portrait-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

.wk-portrait-card {
display: flex;
min-height: 145px;
gap: 15px;
align-items: center;
padding: 20px;
border: 1px solid #e5e9ee;
border-radius: 20px;
background: #fff;
}

.wk-avatar {
display: flex;
width: 52px;
height: 52px;
flex: 0 0 52px;
align-items: center;
justify-content: center;
border-radius: 50%;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
font-weight: 800;
}

.wk-avatar-blue { color: #0b5fa8; background: #eaf4fb; }
.wk-avatar-green { color: #195e3c; background: #ebf6ef; }
.wk-avatar-gold { color: #8a6111; background: #fff5d8; }
.wk-avatar-red { color: #9b432d; background: #fff0eb; }

.wk-portrait-role {
margin-bottom: 4px;
color: #718091;
font-size: 9px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}

.wk-portrait-card h3 {
margin-bottom: 4px;
font-size: 19px;
}

.wk-portrait-card p {
margin-bottom: 0;
color: #718091;
font-size: 12px;
}

.wk-people-highlight {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 36px;
padding: 42px;
border: 1px solid #e8e4da;
border-radius: 28px;
background: linear-gradient(145deg, #fffaf0, #fff);
}

.wk-people-highlight-copy h2 {
margin: 8px 0 12px;
font-size: 38px;
}

.wk-people-highlight-copy p {
color: #718091;
}

.wk-people-highlight-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.wk-people-highlight-list > div {
padding: 20px;
border: 1px solid #eee2bd;
border-radius: 14px;
background: #fff;
}

.wk-people-highlight-list span,
.wk-people-highlight-list strong {
display: block;
}

.wk-people-highlight-list span {
margin-bottom: 6px;
color: #718091;
font-size: 9px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}

.wk-people-highlight-list strong {
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
}

.wk-people-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}

.wk-people-list-card {
overflow: hidden;
border: 1px solid #e5e9ee;
border-radius: 20px;
background: #fff;
}

.wk-people-list-head {
padding: 24px;
border-bottom: 1px solid #e5e9ee;
background: #fafbfc;
}

.wk-people-list-head span {
color: #258052;
font-size: 9px;
font-weight: 800;
letter-spacing: .12em;
}

.wk-people-list-head h3 {
margin: 6px 0 0;
font-size: 22px;
}

.wk-people-list > div {
padding: 15px 22px;
border-bottom: 1px solid #f0f2f4;
}

.wk-people-list > div:last-child {
border-bottom: 0;
}

.wk-people-list strong,
.wk-people-list span {
display: block;
}

.wk-people-list strong {
font-size: 13px;
}

.wk-people-list span {
margin-top: 2px;
color: #718091;
font-size: 10px;
}

.wk-people-list-footer {
padding: 16px 22px;
border-top: 1px solid #e5e9ee;
background: #f6f8fa;
font-size: 12px;
font-weight: 800;
}

.wk-people-soft {
margin-top: 72px;
padding: 58px 28px 28px;
border: 1px solid #edf0f3;
border-radius: 28px;
background: #f8fafb;
}

.wk-domain-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

.wk-domain-card {
min-height: 180px;
padding: 24px;
border: 1px solid #e5e9ee;
border-radius: 20px;
background: #fff;
}

.wk-domain-card > span {
display: block;
margin-bottom: 24px;
color: #a8b4bf;
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
}

.wk-domain-card h3 {
margin-bottom: 8px;
font-size: 20px;
}

.wk-domain-card p {
margin-bottom: 0;
color: #718091;
font-size: 13px;
}

.wk-people-alpha {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.wk-people-alpha > a {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border: 1px solid #e5e9ee;
border-radius: 9px;
background: #fff;
color: #13283d !important;
font-weight: 800;
}

.wk-people-contribute {
display: flex;
gap: 36px;
align-items: center;
margin: 78px 20px 0;
padding: 50px;
overflow: hidden;
border-radius: 28px;
color: #e8f1f8;
background: #0b4e82;
}

.wk-people-contribute-mark {
color: #2f6f9d;
font-family: Georgia, "Times New Roman", serif;
font-size: 118px;
font-weight: 800;
}

.wk-kicker-light {
color: #9ed8b7;
}

.wk-people-contribute-copy h2 {
max-width: 760px;
margin: 8px 0 12px;
color: #fff;
font-size: 40px;
}

.wk-people-contribute-copy p {
max-width: 760px;
}

.wk-people-tools {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 22px 20px 0;
overflow: hidden;
border: 1px solid #e5e9ee;
border-radius: 20px;
background: #fff;
}

.wk-people-tools > div {
min-height: 112px;
padding: 20px;
border-right: 1px solid #e5e9ee;
}

.wk-people-tools > div:last-child {
border-right: 0;
}

.wk-people-tools span,
.wk-people-tools strong,
.wk-people-tools small {
display: block;
}

.wk-people-tools span {
margin-bottom: 14px;
color: #a3aeb8;
font-size: 9px;
font-weight: 800;
letter-spacing: .1em;
}

.wk-people-tools strong {
color: #13283d;
font-size: 13px;
}

.wk-people-tools small {
margin-top: 3px;
color: #718091;
font-size: 11px;
}

@media (max-width: 1100px) {
.wk-topic-grid {
grid-template-columns: repeat(2, 1fr);
}

.wk-portrait-grid {
grid-template-columns: repeat(2, 1fr);
}

.wk-people-columns {
grid-template-columns: 1fr 1fr;
}

.wk-people-highlight {
grid-template-columns: 1fr;
}
}

@media (max-width: 720px) {
.wk-people-hero {
min-height: 0;
padding: 44px 22px;
border-radius: 0 0 20px 20px;
}

.wk-people-title {
font-size: 44px;
}

.wk-people-lead {
font-size: 15px;
}

.wk-people-hero-mark {
display: none;
}

.wk-actions {
align-items: stretch;
flex-direction: column;
}

.wk-btn {
width: 100%;
}

.wk-people-section,
.wk-people-section-tight {
padding: 50px 12px 0;
}

.wk-section-heading {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}

.wk-section-heading h2 {
font-size: 32px;
}

.wk-heading-action {
white-space: normal;
}

.wk-people-stats,
.wk-topic-grid,
.wk-portrait-grid,
.wk-people-columns,
.wk-domain-grid {
grid-template-columns: 1fr;
}

.wk-people-stat {
border-right: 0;
border-bottom: 1px solid #e5e9ee;
}

.wk-people-stat:last-child {
border-bottom: 0;
}

.wk-people-highlight {
padding: 28px 20px;
}

.wk-people-highlight-list {
grid-template-columns: 1fr;
}

.wk-people-soft {
margin-top: 52px;
padding: 42px 16px 20px;
border-radius: 20px;
}

.wk-people-contribute {
margin: 54px 12px 0;
padding: 36px 22px;
border-radius: 20px;
}

.wk-people-contribute-mark {
display: none;
}

.wk-people-contribute-copy h2 {
font-size: 32px;
}

.wk-people-tools {
grid-template-columns: 1fr 1fr;
margin: 18px 12px 0;
}

.wk-people-tools > div {
border-bottom: 1px solid #e5e9ee;
}

.wk-people-alpha > a {
width: 36px;
height: 36px;
}
}

Modèle:Personnalites kabyles/styles.css - Historique des versions