This commit is contained in:
KIRITO_KMA 2026-04-05 20:49:52 +02:00
parent 7d26ffcee4
commit 25ea6cf6f6
19 changed files with 2270 additions and 467 deletions

View file

@ -441,6 +441,19 @@ nav.scrolled {
text-align: center;
}
/* Le contenu du page-hero est toujours visible dès le chargement */
.page-hero .reveal,
.page-hero-content {
opacity: 1;
transform: none;
transition: none;
animation: fadeInUp 0.7s ease forwards;
}
.page-hero .reveal.active {
opacity: 1;
transform: none;
}
.hero-content {
text-align: center;
max-width: 900px;
@ -989,14 +1002,14 @@ section {
position: absolute;
inset: -4px;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);
}
.team-avatar-inner {
position: absolute;
inset: 0;
background: var(--bg-secondary);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);
display: flex;
align-items: center;
justify-content: center;
@ -1415,6 +1428,14 @@ footer {
justify-content: center;
color: var(--text-secondary);
transition: all 0.3s ease;
flex-shrink: 0;
}
.footer-social a svg {
width: 20px;
height: 20px;
fill: currentColor;
display: block;
}
.footer-social a:hover {
@ -1423,6 +1444,110 @@ footer {
color: white;
}
/* ── Partners Section ──────────────────────────────────────────────────────── */
.partners {
padding: 6rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
}
.partner-card {
display: flex;
align-items: center;
gap: 1.25rem;
background: var(--card-bg);
border: 1px solid var(--glass-border);
border-radius: 8px;
padding: 1.5rem;
text-decoration: none;
color: var(--text-primary);
transition: all 0.3s ease;
}
.partner-card:hover {
border-color: var(--accent-primary);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(var(--accent-primary-rgb, 142, 36, 170), 0.15);
}
.partner-avatar {
width: 56px;
height: 56px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'OmegaLarge', sans-serif;
font-size: 1rem;
color: white;
flex-shrink: 0;
}
.partner-info h4 {
font-family: 'OmegaLarge', sans-serif;
font-size: 1rem;
margin-bottom: 0.25rem;
color: var(--text-primary);
}
.partner-info p {
font-size: 0.85rem;
color: var(--text-muted);
}
/* ── Easter Egg ────────────────────────────────────────────────────────────── */
#easter-egg-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: fadeIn 0.3s ease;
}
.easter-egg-box {
background: var(--card-bg);
border: 2px solid var(--accent-primary);
border-radius: 12px;
padding: 3rem 2.5rem;
text-align: center;
max-width: 480px;
width: 90%;
animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.easter-egg-icon {
font-size: 4rem;
margin-bottom: 1rem;
display: block;
}
.easter-egg-box h2 {
font-family: 'OmegaLarge', sans-serif;
font-size: 1.5rem;
color: var(--accent-light);
margin-bottom: 1rem;
}
.easter-egg-box p {
color: var(--text-secondary);
margin-bottom: 2rem;
}
@keyframes scaleIn {
from { transform: scale(0.7); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.footer-bottom {
max-width: 1200px;
margin: 2rem auto 0;
@ -1697,14 +1822,14 @@ footer {
position: absolute;
inset: -4px;
background: rgba(255, 255, 255, 0.3);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);
}
.team-modal-avatar-inner {
position: absolute;
inset: 0;
background: var(--bg-secondary);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);
display: flex;
align-items: center;
justify-content: center;
@ -1815,6 +1940,8 @@ footer {
.team-modal-social a svg {
width: 18px;
height: 18px;
fill: currentColor;
display: block;
}
@media (max-width: 480px) {
@ -2535,50 +2662,9 @@ footer {
gap: 0.75rem;
}
.project-tech-item {
padding: 0.75rem 1.25rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 4px;
color: var(--text-secondary);
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
/* project-tech-item and project-stats-grid → see end of file */
.project-tech-item:hover {
border-color: var(--accent-primary);
color: var(--accent-light);
}
/* Stats Grid in Modal */
.project-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.project-stat-card {
text-align: center;
padding: 1.5rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 8px;
}
.project-stat-card-value {
font-family: 'OmegaLarge', sans-serif;
font-size: 2rem;
color: var(--accent-light);
margin-bottom: 0.25rem;
}
.project-stat-card-label {
font-size: 0.85rem;
color: var(--text-muted);
}
/* project-stat-card-value / label → see end of file */
@media (max-width: 768px) {
.project-modal {
@ -2728,7 +2814,11 @@ footer {
}
.process-step.active .process-step-icon {
color: white;
color: var(--accent-light);
}
[data-theme="light"] .process-step.active .process-step-icon {
color: var(--accent-primary);
}
.process-step-content {
@ -3585,3 +3675,497 @@ footer {
font-size: 1.1rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
HOME — Partners carousel
═══════════════════════════════════════════════════════════════════════════ */
.partners-carousel-wrapper {
overflow: hidden;
padding: 2rem 0;
position: relative;
mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.partners-carousel-track {
display: flex;
gap: 1.5rem;
width: max-content;
will-change: transform;
}
.partner-slide {
flex-shrink: 0;
cursor: pointer;
}
.partner-slide-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
background: var(--card-bg);
border: 1px solid var(--glass-border);
border-radius: 10px;
padding: 1.25rem 1.75rem;
width: 160px;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.partner-slide:hover .partner-slide-inner {
border-color: var(--accent-primary);
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(142,36,170,0.18);
}
.partner-logo-img {
width: 72px;
height: 72px;
object-fit: contain;
border-radius: 8px;
}
.partner-logo-fallback {
width: 72px;
height: 72px;
border-radius: 8px;
align-items: center;
justify-content: center;
font-family: 'OmegaLarge', sans-serif;
font-size: 1.2rem;
color: white;
display: none;
}
.partner-slide-name {
font-size: 0.82rem;
color: var(--text-secondary);
text-align: center;
font-weight: 500;
}
/* Partner modal — réutilise team-modal, surcharge avatar */
.partner-modal-avatar {
background: none !important;
border: none !important;
}
.team-modal-avatar-photo {
width: 72px;
height: 72px;
border-radius: 10px;
object-fit: contain;
display: block;
}
.team-modal-avatar-fallback {
width: 72px;
height: 72px;
border-radius: 10px;
align-items: center;
justify-content: center;
font-family: 'OmegaLarge', sans-serif;
font-size: 1.25rem;
color: white;
display: none;
}
/* ═══════════════════════════════════════════════════════════════════════════
TEAM — Avatar photo
═══════════════════════════════════════════════════════════════════════════ */
.team-avatar-photo {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.team-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-family: 'OmegaLarge', sans-serif;
font-size: 1.5rem;
color: var(--text-primary);
}
.team-avatar-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
/* Modal avatar photo */
.team-modal-avatar-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
}
/* ═══════════════════════════════════════════════════════════════════════════
SERVICES — Note
═══════════════════════════════════════════════════════════════════════════ */
.service-note {
font-size: 0.78rem;
color: var(--text-muted);
margin-bottom: 1rem;
line-height: 1.5;
font-style: italic;
}
.service-note-mark {
color: var(--accent-light);
font-style: normal;
font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════════════════════
FAQ — Page
═══════════════════════════════════════════════════════════════════════════ */
.faq-teaser {
padding: 0 2rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.faq-teaser-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
background: var(--card-bg);
border: 1px solid var(--glass-border);
border-left: 4px solid var(--accent-primary);
border-radius: 10px;
padding: 2rem 2.5rem;
}
.faq-teaser-text p.section-tag {
margin-bottom: 0.5rem;
}
.faq-teaser-text h2 {
font-family: 'OmegaLarge', sans-serif;
font-size: 1.4rem;
color: var(--text-primary);
margin-bottom: 0.6rem;
}
.faq-teaser-text p:last-child {
color: var(--text-secondary);
font-size: 0.9rem;
max-width: 480px;
}
.faq-teaser-btn {
white-space: nowrap;
flex-shrink: 0;
}
.faq-page-section {
padding: 2rem 2rem 5rem;
}
.faq-page-container {
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.faq-category-title {
font-family: 'OmegaLarge', sans-serif;
font-size: 1rem;
color: var(--accent-light);
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--glass-border);
}
.faq-category-title svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.faq-item {
background: var(--card-bg);
border: 1px solid var(--glass-border);
border-radius: 8px;
overflow: hidden;
transition: border-color 0.25s ease;
}
.faq-item.open {
border-color: var(--accent-primary);
}
.faq-question {
width: 100%;
background: none;
border: none;
padding: 1.1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
cursor: pointer;
font-size: 0.95rem;
font-weight: 500;
color: var(--text-primary);
text-align: left;
transition: color 0.25s ease;
}
.faq-question:hover {
color: var(--accent-light);
}
.faq-chevron {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--text-muted);
transition: transform 0.3s ease;
}
.faq-item.open .faq-chevron {
transform: rotate(180deg);
color: var(--accent-light);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.3s ease;
padding: 0 1.5rem;
}
.faq-item.open .faq-answer {
max-height: 300px;
padding: 0 1.5rem 1.25rem;
}
.faq-answer p {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.7;
}
.faq-answer strong {
color: var(--text-primary);
}
.faq-cta-section {
background: var(--card-bg);
border-top: 1px solid var(--glass-border);
padding: 4rem 2rem;
text-align: center;
}
.faq-cta-inner {
max-width: 600px;
margin: 0 auto;
}
.faq-cta-inner h2 {
font-family: 'OmegaLarge', sans-serif;
font-size: 1.6rem;
margin-bottom: 0.75rem;
color: var(--text-primary);
}
.faq-cta-inner p {
color: var(--text-secondary);
margin-bottom: 2rem;
}
.faq-cta-btns {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.faq-teaser-inner {
flex-direction: column;
align-items: flex-start;
}
.faq-teaser-btn {
width: 100%;
text-align: center;
justify-content: center;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
GALLERY — image réelle dans les slides
═══════════════════════════════════════════════════════════════════════════ */
/* Slide sans image chargée → masqué */
.project-gallery-slide.no-image {
display: none !important;
}
/* Slide avec image → l'image remplace le gradient */
.project-gallery-slide.has-image {
background: #000 !important;
}
.gallery-slide-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
display: block;
}
/* Enlève l'overlay gradient quand une vraie image est présente */
.project-gallery-slide.has-image::before {
display: none;
}
/* ═══════════════════════════════════════════════════════════════════════════
MODAL TECH — tech items avec icônes
═══════════════════════════════════════════════════════════════════════════ */
.project-tech-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.75rem;
}
.project-tech-item {
padding: 0.75rem 1rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 6px;
color: var(--text-secondary);
font-size: 0.88rem;
display: flex;
align-items: center;
gap: 0.6rem;
transition: all 0.25s ease;
font-weight: 500;
}
.project-tech-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--accent-light);
}
.project-tech-item:hover {
border-color: var(--accent-primary);
color: var(--text-primary);
background: rgba(142, 36, 170, 0.08);
}
/* ═══════════════════════════════════════════════════════════════════════════
MODAL STATS — grille 2×2 valorisée
═══════════════════════════════════════════════════════════════════════════ */
.project-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.project-stat-card {
text-align: center;
padding: 1.5rem 1rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 10px;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.project-stat-card:hover {
border-color: var(--accent-primary);
transform: translateY(-2px);
}
.project-stat-card-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.85rem;
}
.project-stat-card-icon svg {
width: 22px;
height: 22px;
color: white;
}
.project-stat-card-value {
font-family: 'OmegaLarge', sans-serif;
font-size: 2.2rem;
color: var(--accent-light);
line-height: 1;
margin-bottom: 0.4rem;
}
.project-stat-card-label {
font-size: 0.82rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ═══════════════════════════════════════════════════════════════════════════
PORTFOLIO — image de couverture dans les cartes
═══════════════════════════════════════════════════════════════════════════ */
.portfolio-cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
display: block;
}
/* .portfolio-bg conserve son gradient en fallback derrière l'image */
.portfolio-bg {
position: absolute;
inset: 0;
overflow: hidden;
}