, la <meta description>, le texte des sections et les lettres du filigrane. Ce fichier n'a AUCUNE retouche à subir : l'accent suit data-branch. ========================================================================== */ /* --- Reset minimal --- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; } /* --- Design tokens --- */ :root { /* Spacing — base 4px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; --space-10: 96px; /* Type scale */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 32px; /* clamp(min, préférée, max) = taille de texte "fluide" : jamais en dessous du 1er nombre ni au-dessus du 3e, et suit la largeur d'écran entre les deux (vw = % de la largeur de la fenêtre). */ --text-3xl: clamp(32px, 5vw, 48px); /* Le plancher à 32px (et non 40) est dicté par le mot le plus long d'un titre de hero : « Technologies » en Syne 800 mesure 414px à 40px, soit plus que les 342px utiles d'un écran de 390px — il se faisait rogner. */ --text-4xl: clamp(32px, 7vw, 72px); /* Radius — règle officielle */ --radius-card: 14px; --radius-pill: 99px; /* Fonts */ --font-display: 'Syne', -apple-system, sans-serif; --font-body: 'DM Sans', -apple-system, 'SF Pro Text', BlinkMacSystemFont, sans-serif; /* Branches */ --tech: #3F6DED; --studio: #D64F27; --hexacode: #D7FF5D; } @media (prefers-color-scheme: light) { :root { --bg: #FFFFFF; --fg: #000000; --muted: rgba(0, 0, 0, 0.6); --muted-2: rgba(0, 0, 0, 0.4); --border: rgba(0, 0, 0, 0.1); } } @media (prefers-color-scheme: dark) { :root { --bg: #000000; --fg: #FFFFFF; --muted: rgba(255, 255, 255, 0.6); --muted-2: rgba(255, 255, 255, 0.4); --border: rgba(255, 255, 255, 0.12); } } /* --- Accent de branche — piloté par data-branch --------------------------- Un seul mécanisme de couleur pour tout le site. data-branch peut être posé sur n'importe quel élément et teinte tout ce qu'il contient : - <body data-branch="studio"> → toute une page de branche ; - <article class="card" data-branch="studio"> → juste cette carte, sur l'accueil, où les trois branches cohabitent dans la même page. Valeur par défaut sur :root = neutre (noir/blanc système), ce qui donne à l'accueil un hero et un filigrane non teintés sans aucune règle en plus. */ :root { --accent: var(--fg); --accent-ink: var(--bg); } [data-branch="technologies"] { --accent: var(--tech); --accent-ink: #ffffff; } [data-branch="studio"] { --accent: var(--studio); --accent-ink: #ffffff; } [data-branch="hexacode"] { --accent: var(--hexacode); --accent-ink: #000000; } body { background-color: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease; } .container { max-width: 1200px; margin: 0 auto; padding-left: var(--space-8); padding-right: var(--space-8); } /* Focus visible — accessibilité clavier */ a:focus-visible, button:focus-visible { outline: 2px solid var(--tech); outline-offset: 3px; } /* Le "z" de Shapz suit --fg (noir/blanc système) par défaut — une couleur pleine n'a pas besoin de background-clip:text, donc pas de risque que ça retombe en rectangle plein si le clip n'est pas supporté. */ .logo-z { color: var(--fg); } .logo-z-tech { color: var(--tech); } .logo-z-studio { color: var(--studio); } /* Optionnel : réactive le dégradé de marque Tech→Studio sur un "z" donné, à la place du noir/blanc système — ajouter la classe logo-z--brand en HTML là où c'est voulu. Le clip-to-text n'est nécessaire que pour un dégradé (une couleur pleine s'en passe, cf. .logo-z ci-dessus). */ .logo-z--brand { background: linear-gradient(135deg, var(--tech), var(--studio)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Ancres : dégager la nav fixe quand on arrive directement sur un #id. Une seule règle pour les trois types de cible ancrable du site. */ .hero, .section, .card { scroll-margin-top: 100px; } /* ========================================================================== BRICK UI — Boutons (verbatim brick_ui_styles_btn.css, ne pas modifier) Couleurs volontairement en dur (pas de var(--fg)/--tech/etc.) : fidélité verbatim à la source Brick UI, pas un oubli du système de tokens. .btn-accent juste en dessous reprend ce gabarit — duplication assumée, pour ne pas toucher au bloc verbatim. ========================================================================== */ .btn-auto, .btn-technologies, .btn-studio, .btn-hexacode { display: inline-block; padding: 10px 20px; border-radius: 99px; border: none; cursor: pointer; font-size: 14px; font-weight: 500; font-family: -apple-system, 'SF Pro Text', BlinkMacSystemFont, sans-serif; transition: all 0.15s ease; } .btn-auto:active, .btn-technologies:active, .btn-studio:active, .btn-hexacode:active { transform: scale(0.93); } @media (prefers-color-scheme: light) { .btn-auto { background-color: #000000; color: #ffffff; } } @media (prefers-color-scheme: dark) { .btn-auto { background-color: #ffffff; color: #000000; } } /* Mêmes couleurs que --tech/--studio/--hexacode tout en haut du fichier, réécrites en dur ici (cf. remarque "verbatim" du bandeau ci-dessus). */ .btn-technologies { background-color: #3F6DED; color: #ffffff; } .btn-studio { background-color: #D64F27; color: #ffffff; } .btn-hexacode { background-color: #D7FF5D; color: #000000; } /* --- Bouton accent — même gabarit que ci-dessus, couleur pilotée par --accent (donc par data-branch) au lieu d'être figée par branche. --- */ .btn-accent { display: inline-block; padding: 10px 20px; border-radius: var(--radius-pill); border: none; cursor: pointer; font-size: 14px; font-weight: 500; font-family: -apple-system, 'SF Pro Text', BlinkMacSystemFont, sans-serif; background-color: var(--accent); color: var(--accent-ink); transition: all 0.15s ease; } .btn-accent:active { transform: scale(0.93); } /* ========================================================================== BRICK UI — Navbar (verbatim brick_ui_styles_nvbr.css, ne pas modifier) Couleurs et espacements volontairement en dur, même logique que le bloc Boutons ci-dessus : fidélité verbatim à la source, pas un oubli. ========================================================================== */ /* nav-shell — un seul panneau de verre, navbar + sous-menu confondus. C'est ce conteneur qui porte le flou, pas ses enfants : la jointure visible entre navbar et sous-menu disparaît, et le panneau s'étire simplement en hauteur quand le sous-menu s'ouvre. */ .nav-shell { position: fixed; width: 100%; top: 0; z-index: 1000; /* blur(16px) = flou "verre dépoli" sur ce qu'il y a derrière l'élément */ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background-color 0.15s ease; } @media (prefers-color-scheme: light) { .nav-shell { background-color: rgba(255, 255, 255, 0.7); } } @media (prefers-color-scheme: dark) { .nav-shell { background-color: rgba(0, 0, 0, 0.7); } } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 20px 48px; display: flex; justify-content: space-between; align-items: center; } /* gap volontairement petit : le tracé n'occupe que ~46% de la largeur du viewBox, donc la boîte de 24px porte déjà ~6,5px de vide de chaque côté. 4px de gap = ~10,5px d'écart optique entre le mark et le "S". */ .nav-logo { display: flex; align-items: center; gap: 4px; text-decoration: none; } /* Mark "S" en SVG inline, posé avant le mot "Shapz" dans la nav et dans le footer. La couleur suit --accent (donc data-branch) comme le reste du site : noir/blanc système sur l'accueil, bleu sur Technologies, orange sur Studio. Le tracé n'occupe que la moitié centrale du viewBox 1000×1000 (ink ≈ 52% de la hauteur de la boîte), d'où une boîte plus haute que les 18px du texte pour que le mark arrive à la hauteur des capitales de Syne. */ .nav-logo-icon { width: 24px; height: 24px; flex: none; fill: currentColor; stroke: currentColor; color: var(--accent); } /* Dans le footer, .footer-brand n'est pas un flex (le tagline doit rester en dessous) : l'icône est donc en flux inline, où gap ne s'applique pas — l'écart et le calage vertical sur la ligne de base se font ici. */ .footer-brand .nav-logo-icon { margin-right: 4px; vertical-align: -0.4em; } .nav-logo-text { font-family: 'Syne', -apple-system, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; } @media (prefers-color-scheme: light) { .nav-logo-text { color: #000000; } } @media (prefers-color-scheme: dark) { .nav-logo-text { color: #ffffff; } } .nav-links { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; } .nav-links a { font-family: -apple-system, 'SF Pro Text', BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 400; text-decoration: none; transition: opacity 0.15s ease; } @media (prefers-color-scheme: light) { .nav-links a { color: #555555; } } @media (prefers-color-scheme: dark) { .nav-links a { color: #AAAAAA; } } .nav-links a:hover { opacity: 0.6; } .nav-item { position: static; } /* Écart volontaire vs Brick UI verbatim : le panneau doit se déployer en hauteur (0 → contenu), pas juste faire apparaître le texte en fondu sur un panneau déjà pleine hauteur. max-height fixe plutôt qu'une valeur intrinsèque (grid 0fr/JS mesuré) : à 0 la hauteur est garantie nulle, pas d'espace résiduel sous le texte de la navbar au repos, et la transition n'a pas d'état ambigu si on survole vite plusieurs items. */ .nav-submenu { position: relative; width: 100%; max-height: 0; overflow: hidden; pointer-events: none; transition: max-height 0.22s ease; } /* .is-open est ajoutée/retirée par js/main.js quand on survole un lien */ .nav-submenu.is-open { max-height: 200px; pointer-events: auto; } @media (prefers-color-scheme: light) { .nav-submenu-inner a { color: #555555; } } @media (prefers-color-scheme: dark) { .nav-submenu-inner a { color: #AAAAAA; } } .nav-submenu-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 32px; padding: 20px 48px; opacity: 0; transition: opacity 0.18s ease; } .nav-submenu.is-open .nav-submenu-inner { opacity: 1; } .nav-submenu-inner a { font-size: 13px; font-weight: 400; text-decoration: none; font-family: -apple-system, 'SF Pro Text', BlinkMacSystemFont, sans-serif; transition: opacity 0.15s ease; } .nav-submenu-inner a:hover { opacity: 0.6; } /* Mobile nav — ajout V0, n'existait pas dans Brick UI */ .nav-toggle { display: none; } /* ========================================================================== HERO — composant unique, partagé par l'accueil et les pages de branche -------------------------------------------------------------------------- Une seule structure HTML partout : <section class="hero container"> <h1 class="hero-title">…</h1> <p class="hero-lead">…</p> <div class="hero-actions">…</div> (facultatif) <div class="hero-watermark">SZ…</div> </section> Seuls le texte et --accent changent d'une page à l'autre. ========================================================================== */ /* position:relative est ce qui rattache .hero-watermark à CE bloc (sans lui, il se positionnerait par rapport à la fenêtre et partirait se promener dans la page) ; overflow:hidden rogne ce qui dépasse du hero. 68px ≈ hauteur de .nav-inner (nav fixe, cf. bloc Brick UI — Navbar ci-dessus) : dégage le hero sous la nav. */ .hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding-top: calc(var(--space-10) + 68px); padding-bottom: var(--space-9); } /* Deux garde-fous pour que le titre d'une future branche ne se fasse jamais rogner par l'overflow:hidden ci-dessus, quel que soit son nom : - max-width en min(…, 100%) : les enfants d'un conteneur flex ne se limitent pas tout seuls à la largeur disponible, ils se dimensionnent sur leur contenu. Sans le 100%, « Shapz Technologies » resterait sur une seule ligne trop large au lieu de passer à la ligne en mobile. - overflow-wrap: break-word : filet de sécurité pour un MOT seul plus large que la colonne (cf. la note sur --text-4xl plus haut). Il ne se déclenche que dans ce cas, jamais sur un titre qui tient. */ .hero-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-4xl); line-height: 1.05; letter-spacing: -0.02em; color: var(--accent); max-width: min(820px, 100%); overflow-wrap: break-word; margin: 0 0 var(--space-5); } .hero-lead { font-size: var(--text-lg); color: var(--muted); max-width: min(560px, 100%); line-height: 1.55; margin: 0 0 var(--space-7); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; } /* Filigrane : les lettres changent selon la page (SZ sur l'accueil, SZT pour Technologies, SZS pour Studio) — c'est du texte dans le HTML, pas une variante CSS. color: transparent + text-stroke = texte "en contour" sans remplissage ; color-mix(in srgb, X 22%, transparent) = version très atténuée de X, donc un contour à peine teinté par l'accent de la page. */ .hero-watermark { position: absolute; right: 4rem; top: 50%; transform: translateY(-50%); font-family: var(--font-display); /* 220px de plafond (au-delà, le filigrane écrasait tout), mais on garde le 20vw en dessous de 1100px : une taille fixe ne rétrécit plus avec l'écran et redevient disproportionnée entre 861px et 1100px. */ font-size: min(220px, 20vw); font-weight: 800; letter-spacing: -0.05em; user-select: none; pointer-events: none; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 22%, transparent); } /* --- Titre en trois temps — propre à l'accueil ---------------------------- "Créer. / Développer. / Imaginer." : les trois lignes sont affichées en permanence, empilées. Un SEUL <h1> les contient (trois <h1> concurrents sur une page poseraient un problème d'accessibilité et de SEO) ; c'est display:block sur les <span> qui met chaque temps sur sa propre ligne. Les deux dernières reprennent la couleur de leur branche. */ .hero-title-line { display: block; } .hero-title-line--tech { color: var(--tech); } .hero-title-line--studio { color: var(--studio); } /* ========================================================================== SECTIONS — rythme vertical et titre, partagés par toutes les pages .section porte le même écartement pour Branches, Domaines, Approche, Projets, etc. ; le sens de la section est porté par son id, pas par une classe de plus. ========================================================================== */ .section { padding-top: var(--space-9); padding-bottom: var(--space-9); } .section-heading { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); margin: 0 0 var(--space-7); letter-spacing: -0.01em; } /* ========================================================================== CARTES — composant unique : cartes de branche (accueil) et cartes de domaine (pages de branche) sont la même chose. -------------------------------------------------------------------------- La teinte au survol suit --accent, donc data-branch : une seule règle :hover couvre les trois branches au lieu d'une par couleur. ========================================================================== */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-6); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } /* color-mix(in srgb, X 55%, transparent) = mélange 55% de la couleur X avec du transparent → une version plus douce/translucide de X. Utilisé ici pour teinter bordure et ombre à la couleur de la branche au survol. */ .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--accent) 45%, transparent); } .card-icon { width: 28px; height: 28px; color: var(--accent); margin-bottom: var(--space-4); } .card-tag { display: inline-block; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); margin-bottom: var(--space-4); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } /* Seule exception à la règle --accent : le jaune Hexacode est illisible sur fond clair, il lui faut une encre sombre et un fond un peu plus dense. */ [data-branch="hexacode"] .card-tag { background: color-mix(in srgb, var(--accent) 30%, transparent); color: #5c6600; } @media (prefers-color-scheme: dark) { [data-branch="hexacode"] .card-tag { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } } .card-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); margin: 0 0 var(--space-3); } .card-text { color: var(--muted); font-size: var(--text-sm); line-height: 1.6; margin: 0; } /* :not(:last-child) = uniquement quand quelque chose suit le texte dans la carte, c'est-à-dire un bouton (cartes de branche de l'accueil). On dégage alors le bouton, et on réserve la hauteur d'environ 3 lignes pour que les cartes d'une même rangée restent alignées malgré des textes de longueurs différentes. Sur les cartes de domaine, le texte est le dernier élément : ni marge basse ni hauteur réservée. */ .card-text:not(:last-child) { margin-bottom: var(--space-6); min-height: 68px; } /* ========================================================================== PROJETS — empty state ========================================================================== */ .projects-empty { border: 1px dashed var(--border); border-radius: var(--radius-card); padding: var(--space-8) var(--space-6); text-align: center; } .projects-empty p { color: var(--muted); font-size: var(--text-sm); max-width: 420px; margin: 0 auto var(--space-5); line-height: 1.6; } /* ========================================================================== APPROCHE — propre aux pages de branche (vraie séquence de méthode, d'où la numérotation). Pas d'équivalent sur l'accueil. ========================================================================== */ .approach-steps { list-style: none; margin: 0; padding: 0; } .approach-step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; padding: var(--space-5) 0; border-top: 1px solid var(--border); } .approach-step:first-child { border-top: none; padding-top: 0; } .approach-num { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; } .approach-step h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin: 0 0 var(--space-2); } .approach-step p { color: var(--muted); font-size: var(--text-sm); line-height: 1.6; margin: 0; } /* ========================================================================== CTA — propre aux pages de branche. Le titre réutilise .section-heading, avec juste une marge basse resserrée. ========================================================================== */ .cta { padding-bottom: var(--space-10); text-align: center; } .cta .section-heading { margin-bottom: var(--space-3); } .cta-text { color: var(--muted); font-size: var(--text-base); max-width: 460px; margin: 0 auto var(--space-6); line-height: 1.6; } /* ========================================================================== FOOTER ========================================================================== */ footer { border-top: 1px solid var(--border); padding: var(--space-8) 0 var(--space-6); } .footer-top { display: flex; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-8); } .footer-brand { max-width: 260px; } .footer-tagline { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-3); line-height: 1.6; } .footer-cols { display: flex; gap: var(--space-9); flex-wrap: wrap; } .footer-col h4 { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 var(--space-4); font-weight: 500; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .footer-col a { font-size: var(--text-sm); color: var(--fg); opacity: 0.75; transition: opacity 0.15s ease; } .footer-col a:hover { opacity: 1; } .footer-bottom { display: flex; justify-content: space-between; padding-top: var(--space-6); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted-2); flex-wrap: wrap; gap: var(--space-3); } /* ========================================================================== RESPONSIVE — un seul point de rupture pour tout le site ========================================================================== */ @media (max-width: 860px) { .container { padding-left: var(--space-6); padding-right: var(--space-6); } .nav-inner { padding: var(--space-4) var(--space-6); } .nav-links { display: none; } .nav-toggle { display: inline-flex; flex-direction: column; gap: var(--space-1); background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { width: 20px; height: 2px; background: var(--fg); display: block; } .nav-links.is-mobile-open { display: flex; flex-direction: column; position: fixed; top: 60px; left: 0; width: 100%; padding: var(--space-6) var(--space-6) var(--space-8); gap: var(--space-5); background-color: var(--bg); border-top: 1px solid var(--border); } /* Le panneau de sous-menu est un composant de survol : il n'a pas de sens au toucher, et le lien "Branches" mène déjà à #branches qui liste les trois branches. Sans ça il s'ouvrait par-dessus le menu plein écran. display:none plutôt que max-height:0, pour qu'aucune classe .is-open posée par erreur ne puisse le rouvrir — aucune autre règle ne touche à display sur cet élément, donc rien ne peut l'emporter sur celle-ci. La transition max-height du bloc Navbar n'est pas concernée : elle ne sert qu'au-dessus de ce point de rupture. */ .nav-submenu { display: none; } .card-grid { grid-template-columns: 1fr; } /* Le filigrane passerait derrière le texte sur un écran étroit. */ .hero-watermark { display: none; } .footer-cols { gap: var(--space-6); } } /* Mouvement réduit — accessibilité */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* ========================================================================== SHAPZ — V0 — feuille de style unique -------------------------------------------------------------------------- Un seul fichier pour toutes les pages (index.html et les sz-*.html). Tout ce qui est visuellement identique d'une page à l'autre est UN seul composant, avec les mêmes classes et la même structure HTML : hero, cartes, grilles, titres de section, rythme vertical, nav et footer. Ce qui varie d'une page à l'autre ne passe QUE par deux leviers : - le texte, dans le HTML ; - --accent, piloté par data-branch (cf. « Accent de branche » ci-dessous). Créer une nouvelle branche : dupliquer sz-technologies.html, changer data-branch sur , le , la <meta description>, le texte des sections et les lettres du filigrane. Ce fichier n'a AUCUNE retouche à subir : l'accent suit data-branch. ========================================================================== */ /* --- Reset minimal --- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; } /* --- Design tokens --- */ :root { /* Spacing — base 4px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; --space-10: 96px; /* Type scale */ --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 32px; /* clamp(min, préférée, max) = taille de texte "fluide" : jamais en dessous du 1er nombre ni au-dessus du 3e, et suit la largeur d'écran entre les deux (vw = % de la largeur de la fenêtre). */ --text-3xl: clamp(32px, 5vw, 48px); /* Le plancher à 32px (et non 40) est dicté par le mot le plus long d'un titre de hero : « Technologies » en Syne 800 mesure 414px à 40px, soit plus que les 342px utiles d'un écran de 390px — il se faisait rogner. */ --text-4xl: clamp(32px, 7vw, 72px); /* Radius — règle officielle */ --radius-card: 14px; --radius-pill: 99px; /* Fonts */ --font-display: 'Syne', -apple-system, sans-serif; --font-body: 'DM Sans', -apple-system, 'SF Pro Text', BlinkMacSystemFont, sans-serif; /* Branches */ --tech: #3F6DED; --studio: #D64F27; --hexacode: #D7FF5D; } @media (prefers-color-scheme: light) { :root { --bg: #FFFFFF; --fg: #000000; --muted: rgba(0, 0, 0, 0.6); --muted-2: rgba(0, 0, 0, 0.4); --border: rgba(0, 0, 0, 0.1); } } @media (prefers-color-scheme: dark) { :root { --bg: #000000; --fg: #FFFFFF; --muted: rgba(255, 255, 255, 0.6); --muted-2: rgba(255, 255, 255, 0.4); --border: rgba(255, 255, 255, 0.12); } } /* --- Accent de branche — piloté par data-branch --------------------------- Un seul mécanisme de couleur pour tout le site. data-branch peut être posé sur n'importe quel élément et teinte tout ce qu'il contient : - <body data-branch="studio"> → toute une page de branche ; - <article class="card" data-branch="studio"> → juste cette carte, sur l'accueil, où les trois branches cohabitent dans la même page. Valeur par défaut sur :root = neutre (noir/blanc système), ce qui donne à l'accueil un hero et un filigrane non teintés sans aucune règle en plus. */ :root { --accent: var(--fg); --accent-ink: var(--bg); } [data-branch="technologies"] { --accent: var(--tech); --accent-ink: #ffffff; } [data-branch="studio"] { --accent: var(--studio); --accent-ink: #ffffff; } [data-branch="hexacode"] { --accent: var(--hexacode); --accent-ink: #000000; } body { background-color: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease; } .container { max-width: 1200px; margin: 0 auto; padding-left: var(--space-8); padding-right: var(--space-8); } /* Focus visible — accessibilité clavier */ a:focus-visible, button:focus-visible { outline: 2px solid var(--tech); outline-offset: 3px; } /* Le "z" de Shapz suit --fg (noir/blanc système) par défaut — une couleur pleine n'a pas besoin de background-clip:text, donc pas de risque que ça retombe en rectangle plein si le clip n'est pas supporté. */ .logo-z { color: var(--fg); } .logo-z-tech { color: var(--tech); } .logo-z-studio { color: var(--studio); } /* Optionnel : réactive le dégradé de marque Tech→Studio sur un "z" donné, à la place du noir/blanc système — ajouter la classe logo-z--brand en HTML là où c'est voulu. Le clip-to-text n'est nécessaire que pour un dégradé (une couleur pleine s'en passe, cf. .logo-z ci-dessus). */ .logo-z--brand { background: linear-gradient(135deg, var(--tech), var(--studio)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Ancres : dégager la nav fixe quand on arrive directement sur un #id. Une seule règle pour les trois types de cible ancrable du site. */ .hero, .section, .card { scroll-margin-top: 100px; } /* ========================================================================== BRICK UI — Boutons (verbatim brick_ui_styles_btn.css, ne pas modifier) Couleurs volontairement en dur (pas de var(--fg)/--tech/etc.) : fidélité verbatim à la source Brick UI, pas un oubli du système de tokens. .btn-accent juste en dessous reprend ce gabarit — duplication assumée, pour ne pas toucher au bloc verbatim. ========================================================================== */ .btn-auto, .btn-technologies, .btn-studio, .btn-hexacode { display: inline-block; padding: 10px 20px; border-radius: 99px; border: none; cursor: pointer; font-size: 14px; font-weight: 500; font-family: -apple-system, 'SF Pro Text', BlinkMacSystemFont, sans-serif; transition: all 0.15s ease; } .btn-auto:active, .btn-technologies:active, .btn-studio:active, .btn-hexacode:active { transform: scale(0.93); } @media (prefers-color-scheme: light) { .btn-auto { background-color: #000000; color: #ffffff; } } @media (prefers-color-scheme: dark) { .btn-auto { background-color: #ffffff; color: #000000; } } /* Mêmes couleurs que --tech/--studio/--hexacode tout en haut du fichier, réécrites en dur ici (cf. remarque "verbatim" du bandeau ci-dessus). */ .btn-technologies { background-color: #3F6DED; color: #ffffff; } .btn-studio { background-color: #D64F27; color: #ffffff; } .btn-hexacode { background-color: #D7FF5D; color: #000000; } /* --- Bouton accent — même gabarit que ci-dessus, couleur pilotée par --accent (donc par data-branch) au lieu d'être figée par branche. --- */ .btn-accent { display: inline-block; padding: 10px 20px; border-radius: var(--radius-pill); border: none; cursor: pointer; font-size: 14px; font-weight: 500; font-family: -apple-system, 'SF Pro Text', BlinkMacSystemFont, sans-serif; background-color: var(--accent); color: var(--accent-ink); transition: all 0.15s ease; } .btn-accent:active { transform: scale(0.93); } /* ========================================================================== BRICK UI — Navbar (verbatim brick_ui_styles_nvbr.css, ne pas modifier) Couleurs et espacements volontairement en dur, même logique que le bloc Boutons ci-dessus : fidélité verbatim à la source, pas un oubli. ========================================================================== */ /* nav-shell — un seul panneau de verre, navbar + sous-menu confondus. C'est ce conteneur qui porte le flou, pas ses enfants : la jointure visible entre navbar et sous-menu disparaît, et le panneau s'étire simplement en hauteur quand le sous-menu s'ouvre. */ .nav-shell { position: fixed; width: 100%; top: 0; z-index: 1000; /* blur(16px) = flou "verre dépoli" sur ce qu'il y a derrière l'élément */ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background-color 0.15s ease; } @media (prefers-color-scheme: light) { .nav-shell { background-color: rgba(255, 255, 255, 0.7); } } @media (prefers-color-scheme: dark) { .nav-shell { background-color: rgba(0, 0, 0, 0.7); } } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 20px 48px; display: flex; justify-content: space-between; align-items: center; } /* gap volontairement petit : le tracé n'occupe que ~46% de la largeur du viewBox, donc la boîte de 24px porte déjà ~6,5px de vide de chaque côté. 4px de gap = ~10,5px d'écart optique entre le mark et le "S". */ .nav-logo { display: flex; align-items: center; gap: 4px; text-decoration: none; } /* Mark "S" en SVG inline, posé avant le mot "Shapz" dans la nav et dans le footer. La couleur suit --accent (donc data-branch) comme le reste du site : noir/blanc système sur l'accueil, bleu sur Technologies, orange sur Studio. Le tracé n'occupe que la moitié centrale du viewBox 1000×1000 (ink ≈ 52% de la hauteur de la boîte), d'où une boîte plus haute que les 18px du texte pour que le mark arrive à la hauteur des capitales de Syne. */ .nav-logo-icon { width: 24px; height: 24px; flex: none; fill: currentColor; stroke: currentColor; color: var(--accent); } /* Dans le footer, .footer-brand n'est pas un flex (le tagline doit rester en dessous) : l'icône est donc en flux inline, où gap ne s'applique pas — l'écart et le calage vertical sur la ligne de base se font ici. */ .footer-brand .nav-logo-icon { margin-right: 4px; vertical-align: -0.4em; } .nav-logo-text { font-family: 'Syne', -apple-system, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; } @media (prefers-color-scheme: light) { .nav-logo-text { color: #000000; } } @media (prefers-color-scheme: dark) { .nav-logo-text { color: #ffffff; } } .nav-links { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; } .nav-links a { font-family: -apple-system, 'SF Pro Text', BlinkMacSystemFont, sans-serif; font-size: 14px; font-weight: 400; text-decoration: none; transition: opacity 0.15s ease; } @media (prefers-color-scheme: light) { .nav-links a { color: #555555; } } @media (prefers-color-scheme: dark) { .nav-links a { color: #AAAAAA; } } .nav-links a:hover { opacity: 0.6; } .nav-item { position: static; } /* Écart volontaire vs Brick UI verbatim : le panneau doit se déployer en hauteur (0 → contenu), pas juste faire apparaître le texte en fondu sur un panneau déjà pleine hauteur. max-height fixe plutôt qu'une valeur intrinsèque (grid 0fr/JS mesuré) : à 0 la hauteur est garantie nulle, pas d'espace résiduel sous le texte de la navbar au repos, et la transition n'a pas d'état ambigu si on survole vite plusieurs items. */ .nav-submenu { position: relative; width: 100%; max-height: 0; overflow: hidden; pointer-events: none; transition: max-height 0.22s ease; } /* .is-open est ajoutée/retirée par js/main.js quand on survole un lien */ .nav-submenu.is-open { max-height: 200px; pointer-events: auto; } @media (prefers-color-scheme: light) { .nav-submenu-inner a { color: #555555; } } @media (prefers-color-scheme: dark) { .nav-submenu-inner a { color: #AAAAAA; } } .nav-submenu-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 32px; padding: 20px 48px; opacity: 0; transition: opacity 0.18s ease; } .nav-submenu.is-open .nav-submenu-inner { opacity: 1; } .nav-submenu-inner a { font-size: 13px; font-weight: 400; text-decoration: none; font-family: -apple-system, 'SF Pro Text', BlinkMacSystemFont, sans-serif; transition: opacity 0.15s ease; } .nav-submenu-inner a:hover { opacity: 0.6; } /* Mobile nav — ajout V0, n'existait pas dans Brick UI */ .nav-toggle { display: none; } /* ========================================================================== HERO — composant unique, partagé par l'accueil et les pages de branche -------------------------------------------------------------------------- Une seule structure HTML partout : <section class="hero container"> <h1 class="hero-title">…</h1> <p class="hero-lead">…</p> <div class="hero-actions">…</div> (facultatif) <div class="hero-watermark">SZ…</div> </section> Seuls le texte et --accent changent d'une page à l'autre. ========================================================================== */ /* position:relative est ce qui rattache .hero-watermark à CE bloc (sans lui, il se positionnerait par rapport à la fenêtre et partirait se promener dans la page) ; overflow:hidden rogne ce qui dépasse du hero. 68px ≈ hauteur de .nav-inner (nav fixe, cf. bloc Brick UI — Navbar ci-dessus) : dégage le hero sous la nav. */ .hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding-top: calc(var(--space-10) + 68px); padding-bottom: var(--space-9); } /* Deux garde-fous pour que le titre d'une future branche ne se fasse jamais rogner par l'overflow:hidden ci-dessus, quel que soit son nom : - max-width en min(…, 100%) : les enfants d'un conteneur flex ne se limitent pas tout seuls à la largeur disponible, ils se dimensionnent sur leur contenu. Sans le 100%, « Shapz Technologies » resterait sur une seule ligne trop large au lieu de passer à la ligne en mobile. - overflow-wrap: break-word : filet de sécurité pour un MOT seul plus large que la colonne (cf. la note sur --text-4xl plus haut). Il ne se déclenche que dans ce cas, jamais sur un titre qui tient. */ .hero-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-4xl); line-height: 1.05; letter-spacing: -0.02em; color: var(--accent); max-width: min(820px, 100%); overflow-wrap: break-word; margin: 0 0 var(--space-5); } .hero-lead { font-size: var(--text-lg); color: var(--muted); max-width: min(560px, 100%); line-height: 1.55; margin: 0 0 var(--space-7); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; } /* Filigrane : les lettres changent selon la page (SZ sur l'accueil, SZT pour Technologies, SZS pour Studio) — c'est du texte dans le HTML, pas une variante CSS. color: transparent + text-stroke = texte "en contour" sans remplissage ; color-mix(in srgb, X 22%, transparent) = version très atténuée de X, donc un contour à peine teinté par l'accent de la page. */ .hero-watermark { position: absolute; right: 4rem; top: 50%; transform: translateY(-50%); font-family: var(--font-display); /* 220px de plafond (au-delà, le filigrane écrasait tout), mais on garde le 20vw en dessous de 1100px : une taille fixe ne rétrécit plus avec l'écran et redevient disproportionnée entre 861px et 1100px. */ font-size: min(220px, 20vw); font-weight: 800; letter-spacing: -0.05em; user-select: none; pointer-events: none; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 22%, transparent); } /* --- Titre en trois temps — propre à l'accueil ---------------------------- "Créer. / Développer. / Imaginer." : les trois lignes sont affichées en permanence, empilées. Un SEUL <h1> les contient (trois <h1> concurrents sur une page poseraient un problème d'accessibilité et de SEO) ; c'est display:block sur les <span> qui met chaque temps sur sa propre ligne. Les deux dernières reprennent la couleur de leur branche. */ .hero-title-line { display: block; } .hero-title-line--tech { color: var(--tech); } .hero-title-line--studio { color: var(--studio); } /* ========================================================================== SECTIONS — rythme vertical et titre, partagés par toutes les pages .section porte le même écartement pour Branches, Domaines, Approche, Projets, etc. ; le sens de la section est porté par son id, pas par une classe de plus. ========================================================================== */ .section { padding-top: var(--space-9); padding-bottom: var(--space-9); } .section-heading { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); margin: 0 0 var(--space-7); letter-spacing: -0.01em; } /* ========================================================================== CARTES — composant unique : cartes de branche (accueil) et cartes de domaine (pages de branche) sont la même chose. -------------------------------------------------------------------------- La teinte au survol suit --accent, donc data-branch : une seule règle :hover couvre les trois branches au lieu d'une par couleur. ========================================================================== */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-6); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } /* color-mix(in srgb, X 55%, transparent) = mélange 55% de la couleur X avec du transparent → une version plus douce/translucide de X. Utilisé ici pour teinter bordure et ombre à la couleur de la branche au survol. */ .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--accent) 45%, transparent); } .card-icon { width: 28px; height: 28px; color: var(--accent); margin-bottom: var(--space-4); } .card-tag { display: inline-block; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); margin-bottom: var(--space-4); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } /* Seule exception à la règle --accent : le jaune Hexacode est illisible sur fond clair, il lui faut une encre sombre et un fond un peu plus dense. */ [data-branch="hexacode"] .card-tag { background: color-mix(in srgb, var(--accent) 30%, transparent); color: #5c6600; } @media (prefers-color-scheme: dark) { [data-branch="hexacode"] .card-tag { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } } .card-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); margin: 0 0 var(--space-3); } .card-text { color: var(--muted); font-size: var(--text-sm); line-height: 1.6; margin: 0; } /* :not(:last-child) = uniquement quand quelque chose suit le texte dans la carte, c'est-à-dire un bouton (cartes de branche de l'accueil). On dégage alors le bouton, et on réserve la hauteur d'environ 3 lignes pour que les cartes d'une même rangée restent alignées malgré des textes de longueurs différentes. Sur les cartes de domaine, le texte est le dernier élément : ni marge basse ni hauteur réservée. */ .card-text:not(:last-child) { margin-bottom: var(--space-6); min-height: 68px; } /* ========================================================================== PROJETS — empty state ========================================================================== */ .projects-empty { border: 1px dashed var(--border); border-radius: var(--radius-card); padding: var(--space-8) var(--space-6); text-align: center; } .projects-empty p { color: var(--muted); font-size: var(--text-sm); max-width: 420px; margin: 0 auto var(--space-5); line-height: 1.6; } /* ========================================================================== APPROCHE — propre aux pages de branche (vraie séquence de méthode, d'où la numérotation). Pas d'équivalent sur l'accueil. ========================================================================== */ .approach-steps { list-style: none; margin: 0; padding: 0; } .approach-step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; padding: var(--space-5) 0; border-top: 1px solid var(--border); } .approach-step:first-child { border-top: none; padding-top: 0; } .approach-num { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; } .approach-step h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin: 0 0 var(--space-2); } .approach-step p { color: var(--muted); font-size: var(--text-sm); line-height: 1.6; margin: 0; } /* ========================================================================== CTA — propre aux pages de branche. Le titre réutilise .section-heading, avec juste une marge basse resserrée. ========================================================================== */ .cta { padding-bottom: var(--space-10); text-align: center; } .cta .section-heading { margin-bottom: var(--space-3); } .cta-text { color: var(--muted); font-size: var(--text-base); max-width: 460px; margin: 0 auto var(--space-6); line-height: 1.6; } /* ========================================================================== FOOTER ========================================================================== */ footer { border-top: 1px solid var(--border); padding: var(--space-8) 0 var(--space-6); } .footer-top { display: flex; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-8); } .footer-brand { max-width: 260px; } .footer-tagline { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-3); line-height: 1.6; } .footer-cols { display: flex; gap: var(--space-9); flex-wrap: wrap; } .footer-col h4 { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 var(--space-4); font-weight: 500; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .footer-col a { font-size: var(--text-sm); color: var(--fg); opacity: 0.75; transition: opacity 0.15s ease; } .footer-col a:hover { opacity: 1; } .footer-bottom { display: flex; justify-content: space-between; padding-top: var(--space-6); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted-2); flex-wrap: wrap; gap: var(--space-3); } /* ========================================================================== RESPONSIVE — un seul point de rupture pour tout le site ========================================================================== */ @media (max-width: 860px) { .container { padding-left: var(--space-6); padding-right: var(--space-6); } .nav-inner { padding: var(--space-4) var(--space-6); } .nav-links { display: none; } .nav-toggle { display: inline-flex; flex-direction: column; gap: var(--space-1); background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { width: 20px; height: 2px; background: var(--fg); display: block; } .nav-links.is-mobile-open { display: flex; flex-direction: column; position: fixed; top: 60px; left: 0; width: 100%; padding: var(--space-6) var(--space-6) var(--space-8); gap: var(--space-5); background-color: var(--bg); border-top: 1px solid var(--border); } /* Le panneau de sous-menu est un composant de survol : il n'a pas de sens au toucher, et le lien "Branches" mène déjà à #branches qui liste les trois branches. Sans ça il s'ouvrait par-dessus le menu plein écran. display:none plutôt que max-height:0, pour qu'aucune classe .is-open posée par erreur ne puisse le rouvrir — aucune autre règle ne touche à display sur cet élément, donc rien ne peut l'emporter sur celle-ci. La transition max-height du bloc Navbar n'est pas concernée : elle ne sert qu'au-dessus de ce point de rupture. */ .nav-submenu { display: none; } .card-grid { grid-template-columns: 1fr; } /* Le filigrane passerait derrière le texte sur un écran étroit. */ .hero-watermark { display: none; } .footer-cols { gap: var(--space-6); } } /* Mouvement réduit — accessibilité */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }