:root {
--dark-bg: #0a0a14;
--primary-blue: #00ffff;
--light-blue: #7DF9FF;
--text-color: #e0e0e0;
--text-muted: #a0a0a0;
--container-bg: #10101e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, button, input, select, textarea {
font-family: 'Poppins', sans-serif;
}
body {
background: var(--dark-bg);
color: var(--text-color);
line-height: 1.6;
}
h1, h2, h3 { color: #fff; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); text-align: center; }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 2rem; text-align: center; }
h3 { font-size: 1.5rem; color: var(--primary-blue); margin-bottom: 1rem; }
a { color: var(--primary-blue); text-decoration: none; }
.container { max-width: 900px; margin: auto; padding: 8rem 2rem 4rem; }
.back-link {
display: inline-flex; /* Utilise Flexbox pour l'alignement */
align-items: center; /* Centre verticalement l'icône et le texte */
gap: 0.5rem; /* Espace entre l'icône et le texte */
margin-bottom: 2rem;
color: var(--text-muted);
transition: color 0.3s;
}
.back-link svg {
width: 1em;
height: 1em;
stroke: currentColor; /* L'icône prend la couleur du lien */
}
.back-link:hover {
color: var(--primary-blue);
}
/* Header */
.header { position: fixed; top: 0; left: 0; width: 100%; padding: 1rem 5%; display: flex; justify-content: space-between; align-items: center; background: rgba(10,10,20,0.85); backdrop-filter: blur(10px); z-index: 1000; }
.logo { font-weight: bold; color: #fff; font-size: 1.5rem; }
.nav { display: flex; gap: 2rem; }
.nav a { font-weight: 500; transition: color 0.3s; }
.nav a:hover { color: var(--light-blue); }
.burger { display: none; font-size: 1.8rem; color: white; cursor: pointer; }
/* Service Detail Page */
.service-detail h1 { margin-bottom: 1rem; }
.service-description { font-size: 1.1rem; color: var(--text-muted); max-width: 700px; margin: 0 auto 3rem; text-align: center; }
.skills-section { background: var(--container-bg); padding: 2rem; border-radius: 12px; }
.skills-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.skills-section h2 {
margin-bottom: 1.5rem;
}
.skills-section h3 {
font-size: 1.2rem;
color: var(--primary-blue);
margin-top: 2.5rem;
margin-bottom: 1rem;
border-bottom: 1px solid #333;
padding-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.skills-section h3 {
font-size: 1.2rem;
color: var(--primary-blue);
margin-top: 2.5rem;
margin-bottom: 1rem;
border-bottom: 1px solid #333;
padding-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.skills-section h3::before {
content: '';
display: inline-block;
width: 22px;
height: 22px;
background-color: var(--primary-blue);
-webkit-mask-size: contain;
mask-size: contain;
}
/* Icônes par catégorie */
.cat-code::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-frontend::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-backend::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-lowcode::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-cms::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-support::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-admin::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-network::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-maintenance::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-hardware::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-software::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-security::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-training::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-strategy::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-project::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-architecture::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-performance::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.cat-seo::before { -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); }
.skills-list li {
background: var(--dark-bg);
padding: 1rem;
border-radius: 8px;
border-left: 3px solid var(--primary-blue);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
/* Section Exemples de Prestations */
.prestation-examples {
margin: 4rem 0;
}
.prestation-list {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.prestation-list li {
background: var(--container-bg);
padding: 1.25rem 1.5rem;
border-radius: 8px;
display: flex;
align-items: center;
gap: 1rem;
text-align: left;
font-size: 1.1rem;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.prestation-list li:hover {
transform: scale(1.03);
box-shadow: 0 4px 20px rgba(0, 255, 255, 0.1);
}
.prestation-list li svg {
width: 24px;
height: 24px;
stroke: var(--primary-blue);
flex-shrink: 0;
}
.skills-list li:hover {
transform: scale(1.04);
box-shadow: 0 4px 20px rgba(0, 255, 255, 0.1);
}
/* Footer */
.footer { text-align: center; padding: 2rem; color: var(--text-muted); border-top: 1px solid #222; }
/* Mobile */
@media (max-width: 768px) {
.nav { display: none; flex-direction: column; background: var(--container-bg); position: absolute; top: 70px; right: 5%; padding: 1rem; border-radius: 8px; }
.nav.active { display: flex; }
.burger { display: block; }
.container { padding: 6rem 1rem 3rem; }
}