/* ==========================================================================
1. POLICES D'ÉCRITURE — modifie uniquement ici
==========================================================================
Pour changer les polices :
1) Choisis de nouvelles polices sur https://fonts.google.com
2) Mets à jour le dans le de index.html
3) Remplace les noms ci-dessous
========================================================================== */
:root {
--font-heading: 'Unbounded', sans-serif; /* titres (h1, h2, h3, logo...) */
--font-body: 'Inter', sans-serif; /* texte courant */
}
/* ==========================================================================
2. PALETTE DE COULEURS — modifie uniquement ici
==========================================================================
Le site est construit autour du violet foncé et du noir.
Change les valeurs ci-dessous pour ajuster l'ambiance globale du site,
tout le reste du fichier utilise ces variables.
========================================================================== */
:root {
/* Teintes brutes */
--violet-950: #0d0a16; /* fond principal (quasi noir) */
--violet-900: #14101f; /* fond alterné des sections */
--violet-800: #1e1733; /* cartes / surfaces */
--violet-700: #2b2049; /* bordures / surfaces surélevées */
--violet-500: #7c3aed; /* violet vif — accent principal */
--violet-400: #9d6bff; /* violet clair — survol / accent secondaire */
--violet-300: #c4b0ff; /* violet très clair — détails discrets */
--white: #f6f4fb; /* texte principal */
--gray-300: #b6adcf; /* texte secondaire / atténué */
/* Rôles sémantiques (utilisés dans le reste du CSS) */
--color-bg: var(--violet-950);
--color-bg-alt: var(--violet-900);
--color-surface: var(--violet-800);
--color-border: var(--violet-700);
--color-text: var(--white);
--color-text-muted: var(--gray-300);
--color-accent: var(--violet-500);
--color-accent-hover: var(--violet-400);
--color-accent-soft: var(--violet-300);
/* Dégradé décoratif (hero, boutons) */
--gradient-accent: linear-gradient(135deg, var(--violet-500), #4c1d95);
/* Trio de couleurs pour les dégradés animés (bouton principal, badge) */
--spin-1: var(--violet-500); /* #7c3aed */
--spin-2: #c026d3; /* magenta profond */
--spin-3: #4c1d95; /* indigo profond */
}
/* ==========================================================================
3. EFFETS ANIMÉS (dégradés qui tournent)
==========================================================================
Déclare --grad-angle comme un animable pour faire tourner les
dégradés conic-gradient() du bouton principal et du badge du hero.
Doit rester en dehors de :root (règle @property à part).
Sans support navigateur (@property), le dégradé reste simplement figé
à 0deg — aucune casse visuelle, juste pas d'animation.
========================================================================== */
@property --grad-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
@keyframes grad-spin {
to { --grad-angle: 360deg; }
}
/* ==========================================================================
4. RESET & BASE
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.25;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
ul {
list-style: none;
}
.container {
width: 100%;
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
}
/* ==========================================================================
5. HEADER / NAVIGATION
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(13, 10, 22, 0.7);
backdrop-filter: blur(10px);
border-bottom: 1px solid transparent;
transition: border-color 0.3s ease, background 0.3s ease;
}
.site-header.scrolled {
background: rgba(13, 10, 22, 0.92);
border-bottom-color: var(--color-border);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.logo {
font-family: var(--font-heading);
font-size: 1.35rem;
font-weight: 800;
letter-spacing: 0.02em;
background: var(--gradient-accent);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.nav-links {
display: flex;
gap: 8px;
}
.nav-links a {
display: block;
padding: 10px 16px;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 500;
color: var(--color-text-muted);
transition: color 0.2s ease, background 0.2s ease;
}
.nav-links a:hover {
color: var(--color-text);
background: rgba(124, 58, 237, 0.15);
}
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
}
.nav-toggle span {
display: block;
height: 2px;
width: 100%;
background: var(--color-text);
border-radius: 2px;
}
/* ==========================================================================
6. HERO
========================================================================== */
.hero {
position: relative;
padding: 140px 0 100px;
overflow: hidden;
text-align: center;
background:
radial-gradient(60% 60% at 50% 0%, rgba(124, 58, 237, 0.25), transparent 70%),
var(--color-bg);
}
.hero-inner {
position: relative;
z-index: 1;
max-width: 700px;
}
/* Badge à bordure dégradée tournante (remplace l'ancienne pastille pleine) */
.eyebrow {
display: inline-block;
margin-bottom: 18px;
padding: 7px 16px;
border: 1px solid transparent;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-accent-soft);
background:
linear-gradient(rgba(10, 8, 20, 0.6), rgba(10, 8, 20, 0.6)) padding-box,
conic-gradient(from var(--grad-angle), var(--spin-1), var(--spin-2), var(--spin-3), var(--spin-1)) border-box;
backdrop-filter: blur(6px);
animation: grad-spin 6s linear infinite;
}
.hero h1 {
font-size: clamp(2.4rem, 5vw, 3.6rem);
margin-bottom: 20px;
}
.hero-subtitle {
font-size: 1.1rem;
color: var(--color-text-muted);
margin-bottom: 32px;
}
/* ==========================================================================
7. BOUTONS
========================================================================== */
.btn {
display: inline-block;
padding: 14px 30px;
border-radius: 8px; /* rectangulaire, pas de pilule */
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.02em;
transition: transform 0.15s ease, box-shadow 0.3s ease, animation-duration 0.3s ease;
}
.btn:active {
transform: scale(0.97);
}
.btn-primary {
color: var(--white);
background: conic-gradient(from var(--grad-angle), var(--spin-1), var(--spin-2), var(--spin-3), var(--spin-1));
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
animation: grad-spin 5s linear infinite;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 34px rgba(192, 38, 211, 0.45);
animation-duration: 1.8s; /* le dégradé accélère au survol */
}
/* ==========================================================================
8. SECTIONS GÉNÉRIQUES
========================================================================== */
.section {
padding: 96px 0;
}
.section-alt {
background: var(--color-bg-alt);
}
.section h2 {
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
margin-bottom: 16px;
}
.section-intro {
max-width: 640px;
color: var(--color-text-muted);
margin-bottom: 48px;
}
.subheading {
font-size: 1.2rem;
margin: 48px 0 24px;
color: var(--color-accent-soft);
}
.subheading:first-of-type {
margin-top: 0;
}
/* ==========================================================================
9. PRÉSENTATION — missions & équipe
========================================================================== */
.missions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
.mission-card {
padding: 28px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 14px;
}
.mission-icon {
font-size: 1.8rem;
margin-bottom: 14px;
}
.mission-card h4 {
font-size: 1.05rem;
margin-bottom: 8px;
}
.mission-card p {
color: var(--color-text-muted);
font-size: 0.95rem;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
.team-card {
padding: 28px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 14px;
text-align: center;
}
.team-photo {
width: 96px;
height: 96px;
margin: 0 auto 16px;
border-radius: 50%;
overflow: hidden;
background: var(--gradient-accent);
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-card h4 {
font-size: 1.05rem;
}
.team-role {
color: var(--color-accent-soft);
font-size: 0.9rem;
font-weight: 600;
margin: 4px 0 12px;
}
.team-bio {
color: var(--color-text-muted);
font-size: 0.92rem;
}
/* ==========================================================================
10. REVENDICATIONS
========================================================================== */
.revendications-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.revendications-accent {
width: 64px;
height: 4px;
margin: 20px auto 28px;
border-radius: 999px;
background: linear-gradient(90deg, var(--spin-1), var(--spin-2), var(--spin-3), var(--spin-1));
background-size: 300% 100%;
animation: accent-shimmer 6s linear infinite;
}
@keyframes accent-shimmer {
to { background-position: -300% 0; }
}
.revendications-text {
font-size: 1.3rem;
line-height: 1.65;
font-weight: 500;
color: var(--color-text);
}
/* ==========================================================================
11. SIMULATEUR DE DEVIS
========================================================================== */
.devis-root {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 40px;
min-height: 160px;
}
.devis-placeholder {
text-align: center;
color: var(--color-text-muted);
}
.devis-placeholder p {
margin-bottom: 10px;
}
.devis-placeholder-hint {
font-size: 0.9rem;
}
.devis-placeholder code {
background: rgba(124, 58, 237, 0.15);
color: var(--color-accent-soft);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.85em;
}
/* ==========================================================================
12. PORTFOLIO
========================================================================== */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.portfolio-card {
display: block;
border: 1px solid transparent;
border-radius: 14px;
overflow: hidden;
background:
linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
linear-gradient(var(--color-border), var(--color-border)) border-box;
transition: transform 0.25s ease;
}
/* Au survol, la bordure devient un dégradé tournant (variante plus rapide
et dans un ordre de couleurs différent du bouton principal / badge) */
.portfolio-card:hover {
transform: translateY(-4px);
background:
linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
conic-gradient(from var(--grad-angle), var(--spin-2), var(--spin-3), var(--spin-1), var(--spin-2)) border-box;
animation: grad-spin 3s linear infinite;
}
.portfolio-image {
aspect-ratio: 16 / 9;
background: var(--color-bg-alt);
}
.portfolio-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.portfolio-body {
padding: 20px 24px 24px;
}
.portfolio-body h4 {
font-size: 1.05rem;
margin-bottom: 8px;
}
.portfolio-body p {
color: var(--color-text-muted);
font-size: 0.92rem;
margin-bottom: 14px;
}
.portfolio-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Bordure dégradée plus lente et à contresens du badge/bouton, pour que
les éléments animés ne soient pas tous synchronisés visuellement */
.tag {
font-size: 0.78rem;
font-weight: 600;
padding: 4px 11px;
border: 1px solid transparent;
border-radius: 6px;
background:
linear-gradient(rgba(124, 58, 237, 0.15), rgba(124, 58, 237, 0.15)) padding-box,
conic-gradient(from var(--grad-angle), var(--spin-3), var(--spin-2), var(--spin-1), var(--spin-3)) border-box;
color: var(--color-accent-soft);
animation: grad-spin 9s linear infinite reverse;
}
/* ==========================================================================
13. FOOTER
========================================================================== */
.site-footer {
padding: 40px 0;
border-top: 1px solid var(--color-border);
background: var(--color-bg-alt);
}
.footer-inner {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: space-between;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.footer-inner a:hover {
color: var(--color-accent-soft);
}
/* ==========================================================================
14. RESPONSIVE
========================================================================== */
@media (max-width: 768px) {
.nav-toggle {
display: flex;
}
.nav-links {
position: absolute;
top: 72px;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
padding: 12px 24px 20px;
background: rgba(13, 10, 22, 0.98);
border-bottom: 1px solid var(--color-border);
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-links.open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.nav-links a {
padding: 12px 8px;
}
.hero {
padding: 110px 0 72px;
}
.section {
padding: 64px 0;
}
}