/* =========================================================== Groupe FLC — feuille de style partagée (édition glass/futuriste) =========================================================== */ :root { /* Fond de page (dégradé clair, sous la scène 3D) */ --page-gradient: linear-gradient(160deg, #F4F6FB 0%, #EEEBFB 45%, #EAF6F2 100%); --color-ink: #1B1F2A; --color-ink-soft: rgba(27, 31, 42, 0.68); --color-ink-faint: rgba(27, 31, 42, 0.12); --color-ochre: #F0A93D; /* Verre */ --glass-bg: rgba(255, 255, 255, 0.5); --glass-bg-strong: rgba(255, 255, 255, 0.68); --glass-border: rgba(255, 255, 255, 0.65); --glass-blur: 20px; /* Couleur d'activité par défaut (surchargée via [data-brand]) */ --brand: #4A5FD9; --brand-dark: #2E3FA0; --brand-glow: rgba(74, 95, 217, 0.35); /* Typo */ --font-display: "Space Grotesk", sans-serif; --font-body: "Work Sans", sans-serif; --fs-h1: clamp(2.25rem, 1.55rem + 3vw, 4rem); --fs-h2: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem); --fs-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); --fs-lead: clamp(1.05rem, 0.97rem + 0.4vw, 1.25rem); --fs-small: 0.875rem; /* Espacements */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 7.5rem; --container: 1120px; --radius: 20px; --radius-lg: 28px; --radius-sm: 12px; } /* Couleurs par activité — versions lumineuses, pensées pour le verre. Appliquées via l'attribut data-brand (sur , ou sur une carte/puce). */ [data-brand="cosmetic"] { --brand: #E8748C; --brand-dark: #B23F5A; --brand-glow: rgba(232,116,140,0.35); } [data-brand="fashion"] { --brand: #4A5FD9; --brand-dark: #2E3FA0; --brand-glow: rgba(74,95,217,0.35); } [data-brand="link"] { --brand: #3FBF97; --brand-dark: #217A5C; --brand-glow: rgba(63,191,151,0.35); } [data-brand="informatique"] { --brand: #8B5CF6; --brand-dark: #5B3DB5; --brand-glow: rgba(139,92,246,0.35); } /* ---------- Reset minimal ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: var(--page-gradient); color: var(--color-ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3, p, ul { margin: 0; } ul { padding: 0; list-style: none; } button { font: inherit; cursor: pointer; } h1, h2, h3, .font-display { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } .section { padding-block: var(--space-2xl); position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Focus clavier visible partout */ a:focus-visible, button:focus-visible { outline: 3px solid var(--color-ochre); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- Fond 3D (Three.js) ---------- */ #bg-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; } /* ---------- Panneaux de verre (glassmorphism) ---------- */ .glass-panel { position: relative; overflow: hidden; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: 0 25px 60px -25px rgba(20, 20, 40, 0.25), 0 0 90px -25px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5); } /* Motif "bogolan" — texture décorative très discrète dans les panneaux */ .pattern-overlay { position: absolute; inset: 0; pointer-events: none; background-color: var(--brand); opacity: 0.06; -webkit-mask-image: url("../img/pattern-bogolan.svg"); mask-image: url("../img/pattern-bogolan.svg"); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 90px; mask-size: 90px; } /* ---------- En-tête ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); border-bottom: 1px solid var(--glass-border); transition: box-shadow 0.2s ease; } .site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(20, 20, 40, 0.35); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: 1rem; } .brand-mark { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--brand-dark); } .brand-mark svg { width: 26px; height: 26px; } .brand-mark__text { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--color-ink); white-space: nowrap; } .brand-mark__text small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-soft); } .site-nav { display: flex; align-items: center; gap: var(--space-lg); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; } .site-nav a { text-decoration: none; } .site-nav a:not(.btn):hover { color: var(--brand-dark); } .breadcrumb { font-size: var(--fs-small); font-weight: 500; color: var(--color-ink-soft); } .breadcrumb a { text-decoration: none; border-bottom: 1px solid currentColor; } .breadcrumb a:hover { color: var(--brand-dark); } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.85rem; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; text-decoration: none; border: 2px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--color-ink); color: #fff; } .btn-primary:hover { box-shadow: 0 14px 30px -10px rgba(27,31,42,0.4); } .btn-onbrand { background: var(--brand); color: #fff; box-shadow: 0 12px 28px -10px var(--brand-glow); } .btn-onbrand:hover { filter: brightness(1.08); box-shadow: 0 16px 34px -8px var(--brand-glow); } .btn-ghost { background: rgba(255,255,255,0.35); border-color: var(--glass-border); color: var(--color-ink); } .btn-ghost:hover { background: rgba(255,255,255,0.55); } .btn-ghost-dark { background: transparent; border-color: var(--color-ink-faint); color: var(--color-ink); } .btn-ghost-dark:hover { background: rgba(27,31,42,0.06); } /* ---------- Hero accueil ---------- */ .hero { padding-block: var(--space-3xl) var(--space-2xl); } .hero__inner { max-width: 46rem; padding: clamp(2rem, 3vw + 1rem, 3.5rem); } .hero .eyebrow { color: var(--brand-dark); margin-bottom: var(--space-sm); position: relative; } .hero h1 { font-size: var(--fs-h1); margin-bottom: var(--space-md); color: var(--color-ink); position: relative; } .hero__lead { font-size: var(--fs-lead); color: var(--color-ink-soft); max-width: 40rem; margin-bottom: var(--space-lg); position: relative; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; position: relative; } /* ---------- Section À propos ---------- */ .about__panel { padding: clamp(2rem, 3vw + 1rem, 3rem); } .about h2 { font-size: var(--fs-h2); max-width: 30rem; } .about__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-lg); } .about__text { font-size: var(--fs-lead); color: var(--color-ink-soft); max-width: 42rem; } .about__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .stat { padding: var(--space-md); background: rgba(255,255,255,0.55); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); } .stat strong { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--brand-dark); } .stat span { font-size: var(--fs-small); color: var(--color-ink-soft); } @media (min-width: 780px) { .about__grid { grid-template-columns: 1.2fr 1fr; align-items: start; } } /* ---------- Grille des activités ---------- */ .activities .section-head { max-width: 34rem; margin-bottom: var(--space-lg); } .activities .eyebrow { color: var(--brand-dark); margin-bottom: var(--space-xs); } .activities h2 { font-size: var(--fs-h2); margin-bottom: var(--space-xs); } .activities__intro { color: var(--color-ink-soft); font-size: var(--fs-lead); } .activities-grid { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: var(--space-md); } @media (min-width: 640px) { .activities-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .activities-grid { grid-template-columns: repeat(4, 1fr); } } .card { display: flex; flex-direction: column; gap: 0.85rem; padding: var(--space-md); background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); border: 1px solid var(--glass-border); border-top: 2px solid var(--brand); border-radius: var(--radius); text-decoration: none; color: inherit; box-shadow: 0 16px 40px -22px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.5); transition: transform 0.18s ease, box-shadow 0.18s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 26px 55px -20px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.6); } .card__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 0 24px var(--brand-glow); } .card__icon svg { width: 24px; height: 24px; } .card__title { font-size: 1.2rem; } .card__domain { font-family: var(--font-body); font-size: var(--fs-small); color: var(--brand-dark); font-weight: 600; } .card__text { color: var(--color-ink-soft); font-size: 0.95rem; flex: 1; } .card__link { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--color-ink); } .card:hover .card__link { color: var(--brand-dark); } /* ---------- Hero page activité ---------- */ .hero-activity .container { padding-block: var(--space-lg) var(--space-2xl); } .hero-activity__panel { padding: clamp(1.75rem, 2.5vw + 1rem, 3rem); display: grid; gap: var(--space-lg); } .hero-activity__body { display: grid; gap: var(--space-lg); align-items: center; position: relative; } @media (min-width: 780px) { .hero-activity__body { grid-template-columns: 1.3fr 1fr; } } .hero-activity .breadcrumb { position: relative; } .hero-activity .eyebrow { color: var(--brand-dark); margin-bottom: var(--space-sm); } .hero-activity h1 { font-size: var(--fs-h1); margin-bottom: var(--space-sm); color: var(--color-ink); } .hero-activity__tagline { font-size: var(--fs-lead); color: var(--color-ink-soft); max-width: 34rem; } .hero-activity__visual { justify-self: center; width: min(240px, 60vw); aspect-ratio: 1; border-radius: 50%; background: var(--brand); box-shadow: 0 0 70px -10px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; } .hero-activity__visual svg { width: 45%; height: 45%; color: #fff; } /* ---------- Contenu page activité ---------- */ .activity-content { max-width: 42rem; padding: clamp(1.75rem, 2.5vw + 1rem, 3rem); } .activity-content h2 { font-size: var(--fs-h2); margin-bottom: var(--space-sm); } .activity-content p { font-size: var(--fs-lead); color: var(--color-ink-soft); margin-bottom: var(--space-lg); } .activity-content__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .external-hint { font-size: var(--fs-small); color: var(--color-ink-soft); } /* ---------- Grille produits (page activité) ---------- */ .products-section .section-head { max-width: 34rem; margin-bottom: var(--space-lg); } .products-section .eyebrow { color: var(--brand-dark); margin-bottom: var(--space-xs); } .products-section h2 { font-size: var(--fs-h2); margin-bottom: var(--space-xs); } .products-section__intro { color: var(--color-ink-soft); font-size: var(--fs-lead); } .products-category { margin-top: var(--space-xl); } .products-category:first-of-type { margin-top: 0; } .products-category h3 { font-size: var(--fs-h3); margin-bottom: var(--space-md); color: var(--color-ink); text-align: center; } .products-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); max-width: 34rem; margin-inline: auto; } @media (min-width: 520px) { .products-grid { grid-template-columns: repeat(2, 1fr); } } .product-card { display: flex; flex-direction: column; overflow: hidden; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); border: 1px solid var(--glass-border); border-top: 2px solid var(--brand); border-radius: var(--radius); box-shadow: 0 16px 40px -22px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.5); transition: transform 0.18s ease, box-shadow 0.18s ease; } .product-card:hover { transform: translateY(-6px); box-shadow: 0 26px 55px -20px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.6); } .product-card__image { aspect-ratio: 4 / 3; background: rgba(255,255,255,0.4); overflow: hidden; } .product-card__image img { width: 100%; height: 100%; object-fit: cover; } .product-card__body { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--space-md); } .product-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-ink); } .product-card__desc { font-size: 0.9rem; color: var(--color-ink-soft); } .other-activities h3 { font-size: var(--fs-h3); margin-bottom: var(--space-md); color: var(--color-ink); } .chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 999px; background: var(--glass-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); text-decoration: none; color: var(--color-ink); font-size: 0.9rem; font-weight: 500; transition: background 0.15s ease, transform 0.15s ease; } .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px var(--brand-glow); } .chip:hover { background: rgba(255,255,255,0.75); transform: translateY(-2px); } /* ---------- Pied de page ---------- */ .site-footer { background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); backdrop-filter: blur(var(--glass-blur)) saturate(160%); border-top: 1px solid var(--glass-border); color: var(--color-ink-soft); } .site-footer .container { padding-block: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-lg); } .footer__top { display: grid; gap: var(--space-lg); } @media (min-width: 780px) { .footer__top { grid-template-columns: 1.2fr 1fr; } } .footer__brand .brand-mark { color: var(--brand-dark); } .footer__brand .brand-mark__text { color: var(--color-ink); } .footer__brand .brand-mark__text small { color: var(--color-ink-soft); } .footer__brand p { margin-top: var(--space-sm); max-width: 26rem; color: var(--color-ink-soft); } .footer__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .footer__links h3 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ink-soft); margin-bottom: var(--space-sm); } .footer__links ul { display: grid; gap: 0.6rem; } .footer__links a { text-decoration: none; font-size: 0.95rem; color: var(--color-ink); } .footer__links a:hover { color: var(--brand-dark); } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; padding-top: var(--space-md); border-top: 1px solid var(--color-ink-faint); font-size: var(--fs-small); color: var(--color-ink-soft); }