576 lines
14 KiB
CSS
576 lines
14 KiB
CSS
/* Composants réutilisables — minimal & pro */
|
|
|
|
/* Titres de section avec liseré orange */
|
|
.section-title {
|
|
display: inline-block;
|
|
position: relative;
|
|
padding-bottom: 0.4rem;
|
|
margin-bottom: var(--space-6, 1.5rem);
|
|
}
|
|
|
|
.section-title::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 56px;
|
|
height: 3px;
|
|
background: var(--color-accent, #ff6b35);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* Grille responsive */
|
|
.grid {
|
|
display: grid;
|
|
gap: var(--space-6, 1.5rem);
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
|
|
}
|
|
|
|
/* Carte */
|
|
.card {
|
|
background: var(--color-surface, #ffffff);
|
|
border: 1px solid var(--color-border, #efefef);
|
|
border-radius: var(--radius-md, 10px);
|
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
|
padding: var(--space-6, 1.5rem);
|
|
transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--color-accent-100, #ffe4d6);
|
|
box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
|
|
}
|
|
|
|
/* Blocs génériques (layout de sections) */
|
|
.block {
|
|
background: var(--color-surface, #ffffff);
|
|
border: 1px solid var(--color-border, #efefef);
|
|
border-radius: var(--radius-md, 10px);
|
|
padding: var(--space-6, 1.5rem);
|
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
|
}
|
|
|
|
.block--split {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-6, 1.5rem);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.block__media {
|
|
flex: 0 0 96px;
|
|
height: 96px;
|
|
border-radius: var(--radius-md, 10px);
|
|
background: var(--color-accent-50, #fff4ec);
|
|
border: 1px solid var(--color-accent-100, #ffe4d6);
|
|
}
|
|
|
|
.block__content {
|
|
flex: 1 1 360px;
|
|
}
|
|
|
|
/* Feature (icône + texte) */
|
|
.feature {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-4, 1rem);
|
|
}
|
|
|
|
.feature__icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 999px;
|
|
background: var(--color-accent-50, #fff4ec);
|
|
border: 1px solid var(--color-accent-100, #ffe4d6);
|
|
box-shadow: inset 0 0 0 2px rgba(255, 107, 53, 0.08);
|
|
}
|
|
|
|
.feature__title {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Barre d'appel à action */
|
|
.cta-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-4, 1rem);
|
|
padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
|
|
border-radius: var(--radius-md, 10px);
|
|
background: var(--color-accent-50, #fff4ec);
|
|
border: 1px solid var(--color-accent-100, #ffe4d6);
|
|
}
|
|
|
|
/* Blocs génériques (layout de sections) */
|
|
.block {
|
|
background: var(--color-surface, #ffffff);
|
|
border: 1px solid var(--color-border, #efefef);
|
|
border-radius: var(--radius-md, 10px);
|
|
padding: var(--space-6, 1.5rem);
|
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
|
}
|
|
|
|
.block--split {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-6, 1.5rem);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.block__media {
|
|
flex: 0 0 96px;
|
|
height: 96px;
|
|
border-radius: var(--radius-md, 10px);
|
|
background: var(--color-accent-50, #fff4ec);
|
|
border: 1px solid var(--color-accent-100, #ffe4d6);
|
|
}
|
|
|
|
.block__content {
|
|
flex: 1 1 360px;
|
|
}
|
|
|
|
/* Feature (icône + texte) */
|
|
.feature {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-4, 1rem);
|
|
}
|
|
|
|
.feature__icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 999px;
|
|
background: var(--color-accent-50, #fff4ec);
|
|
border: 1px solid var(--color-accent-100, #ffe4d6);
|
|
box-shadow: inset 0 0 0 2px rgba(255, 107, 53, 0.08);
|
|
}
|
|
|
|
.feature__title {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Barre d'appel à action */
|
|
.cta-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-4, 1rem);
|
|
padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
|
|
border-radius: var(--radius-md, 10px);
|
|
background: var(--color-accent-50, #fff4ec);
|
|
border: 1px solid var(--color-accent-100, #ffe4d6);
|
|
}
|
|
|
|
/* =========================
|
|
DEV HERO + badges techno
|
|
========================= */
|
|
.dev-hero {
|
|
position: relative;
|
|
background: linear-gradient(180deg, var(--color-surface), var(--color-accent-50, #fff4ec));
|
|
border-bottom: 1px solid var(--color-border, #efefef);
|
|
padding-block: var(--space-16, 4rem);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dev-hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -10% -20% auto -20%;
|
|
height: 220px;
|
|
background: radial-gradient(closest-side, color-mix(in oklab, var(--color-accent) 12%, transparent), transparent 70%);
|
|
opacity: .35;
|
|
filter: blur(20px);
|
|
}
|
|
|
|
.dev-hero .headline {
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.dev-hero .subheadline {
|
|
color: var(--color-muted, #6b7280);
|
|
max-width: 70ch;
|
|
}
|
|
|
|
.tech-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: var(--space-4, 1rem);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.35rem 0.6rem;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--color-accent-100, #ffe4d6);
|
|
background: var(--color-accent-50, #fff4ec);
|
|
color: var(--color-accent-700, #c74d25);
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.badge--mono {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
letter-spacing: .02em;
|
|
}
|
|
|
|
/* =========================
|
|
Projets — liste en cartes
|
|
========================= */
|
|
.projects-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
gap: var(--space-6, 1.5rem);
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
|
|
}
|
|
|
|
.projects-list > li {
|
|
background: var(--color-surface, #ffffff);
|
|
border: 1px solid var(--color-border, #efefef);
|
|
border-radius: var(--radius-md, 10px);
|
|
padding: var(--space-6, 1.5rem);
|
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
|
transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.projects-list > li:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--color-accent-100, #ffe4d6);
|
|
box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
|
|
}
|
|
|
|
.projects-list h3 {
|
|
margin: 0 0 var(--space-2, 0.5rem);
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.projects-list p {
|
|
margin: 0;
|
|
color: var(--color-muted, #6b7280);
|
|
}
|
|
|
|
/* =========================
|
|
Services — cartes (features)
|
|
========================= */
|
|
#services ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
gap: var(--space-6, 1.5rem);
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
|
|
}
|
|
|
|
.service-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3, 0.75rem);
|
|
}
|
|
|
|
/* =====================================
|
|
Compétences — skill cards & meters
|
|
===================================== */
|
|
.skill-grid {
|
|
display: grid;
|
|
gap: var(--space-6, 1.5rem);
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
|
|
}
|
|
|
|
/* Carte de compétence — plus expressive et accessible */
|
|
.skill-card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4, 1rem);
|
|
background: var(--color-surface, #ffffff);
|
|
border: 1px solid var(--color-border, #efefef);
|
|
border-radius: var(--radius-md, 10px);
|
|
padding: var(--space-6, 1.5rem);
|
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
|
transition:
|
|
transform 0.15s ease,
|
|
box-shadow 0.2s ease,
|
|
border-color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
/* Accent latéral qui apparaît au survol (met en valeur la carte) */
|
|
.skill-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
width: 4px;
|
|
background: transparent;
|
|
border-top-left-radius: var(--radius-md, 10px);
|
|
border-bottom-left-radius: var(--radius-md, 10px);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.skill-card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--color-accent-100, #ffe4d6);
|
|
box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
|
|
}
|
|
|
|
.skill-card:hover::after {
|
|
background: var(--color-accent, #ff6b35);
|
|
}
|
|
|
|
/* Focus clavier visible (accessibilité) */
|
|
.skill-card:focus-within {
|
|
border-color: var(--color-accent, #ff6b35);
|
|
box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent, #ff6b35) 22%, transparent);
|
|
}
|
|
|
|
/* Sous-blocs optionnels */
|
|
.skill-card__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3, 0.75rem);
|
|
}
|
|
|
|
.skill-card__icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
background: var(--color-accent-50, #fff4ec);
|
|
border: 1px solid var(--color-accent-100, #ffe4d6);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.skill-card__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3, 0.75rem);
|
|
}
|
|
|
|
.skill-card__footer {
|
|
margin-top: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3, 0.75rem);
|
|
padding-top: var(--space-4, 1rem);
|
|
border-top: 1px solid var(--color-border, #efefef);
|
|
}
|
|
|
|
.skill-card__title {
|
|
margin: 0 0 var(--space-3, 0.75rem);
|
|
}
|
|
|
|
.skill-card__tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.skill-meter {
|
|
height: 8px;
|
|
background: #ffffff;
|
|
border: 1px solid var(--color-border, #efefef);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.skill-meter__bar {
|
|
height: 100%;
|
|
width: var(--level, 70%);
|
|
background: linear-gradient(90deg, var(--color-accent, #ff6b35), var(--color-accent-700, #c74d25));
|
|
}
|
|
|
|
/* =====================================
|
|
Code block et stats
|
|
===================================== */
|
|
.code-block {
|
|
background: #0b0f14;
|
|
color: #e5e7eb;
|
|
border-radius: var(--radius-md, 10px);
|
|
padding: var(--space-6, 1.5rem);
|
|
border: 1px solid #1f2937;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
}
|
|
|
|
.code-block .code-accent {
|
|
color: #ffb38f;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
gap: var(--space-6, 1.5rem);
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
margin-top: var(--space-6, 1.5rem);
|
|
}
|
|
|
|
.stat {
|
|
background: #ffffff;
|
|
border: 1px solid var(--color-border, #efefef);
|
|
border-radius: var(--radius-md, 10px);
|
|
padding: var(--space-5, 1.25rem);
|
|
text-align: center;
|
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
|
}
|
|
|
|
.stat .stat__value {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
color: var(--color-accent-700, #c74d25);
|
|
}
|
|
|
|
.stat .stat__label {
|
|
color: var(--color-muted, #6b7280);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* =====================================
|
|
Catégories + puces (chips)
|
|
===================================== */
|
|
section > ul > li {
|
|
background: var(--color-surface, #ffffff);
|
|
border: 1px solid var(--color-border, #efefef);
|
|
border-radius: var(--radius-md, 10px);
|
|
padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
|
|
}
|
|
|
|
section > ul > li + li {
|
|
margin-top: var(--space-4, 1rem);
|
|
}
|
|
|
|
section > ul > li > h3 {
|
|
margin: 0 0 var(--space-3, 0.75rem);
|
|
}
|
|
|
|
section > ul > li > ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
section > ul > li > ul > li {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 999px;
|
|
background: var(--color-accent-50, #fff4ec);
|
|
color: var(--color-accent-700, #c74d25);
|
|
border: 1px solid var(--color-accent-100, #ffe4d6);
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* =========================
|
|
Projets — liste en cartes
|
|
========================= */
|
|
.projects-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
gap: var(--space-6, 1.5rem);
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
|
|
}
|
|
|
|
.projects-list > li {
|
|
background: var(--color-surface, #ffffff);
|
|
border: 1px solid var(--color-border, #efefef);
|
|
border-radius: var(--radius-md, 10px);
|
|
padding: var(--space-6, 1.5rem);
|
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
|
transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.projects-list > li:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--color-accent-100, #ffe4d6);
|
|
box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
|
|
}
|
|
|
|
.projects-list h3 {
|
|
margin: 0 0 var(--space-2, 0.5rem);
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.projects-list p {
|
|
margin: 0;
|
|
color: var(--color-muted, #6b7280);
|
|
}
|
|
|
|
/* =========================
|
|
Services — cartes simples
|
|
========================= */
|
|
#services ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
gap: var(--space-6, 1.5rem);
|
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
|
|
}
|
|
|
|
#services li {
|
|
position: relative;
|
|
background: var(--color-surface, #ffffff);
|
|
border: 1px solid var(--color-border, #efefef);
|
|
border-radius: var(--radius-md, 10px);
|
|
padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
|
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
|
transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
#services li::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0 auto 0 0;
|
|
width: 4px;
|
|
background: var(--color-accent, #ff6b35);
|
|
border-top-left-radius: var(--radius-md, 10px);
|
|
border-bottom-left-radius: var(--radius-md, 10px);
|
|
}
|
|
|
|
#services li:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--color-accent-100, #ffe4d6);
|
|
box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
|
|
}
|
|
|
|
/* =====================================
|
|
Compétences — catégories + puces (chips)
|
|
===================================== */
|
|
section > ul > li {
|
|
background: var(--color-surface, #ffffff);
|
|
border: 1px solid var(--color-border, #efefef);
|
|
border-radius: var(--radius-md, 10px);
|
|
padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
|
|
}
|
|
|
|
section > ul > li + li {
|
|
margin-top: var(--space-4, 1rem);
|
|
}
|
|
|
|
section > ul > li > h3 {
|
|
margin: 0 0 var(--space-3, 0.75rem);
|
|
}
|
|
|
|
section > ul > li > ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
section > ul > li > ul > li {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 999px;
|
|
background: var(--color-accent-50, #fff4ec);
|
|
color: var(--color-accent-700, #c74d25);
|
|
border: 1px solid var(--color-accent-100, #ffe4d6);
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
}
|