:root{
/* light base */
--paper:#f4f1ea; /* warm off-white */
--paper-2:#ebe6db; /* card bg */
--paper-3:#dfd8c9; /* dashed lines */
--ink:#0d1220; /* primary text */
--ink-soft:#3a4258;
--ink-dim:#7a8298;
--blue:#2c5cff; /* electric blue */
--blue-soft:#6b8eff;
--blue-deep:#0c2a8a;
--accent:#ff5b2e; /* warm accent for highlights */
--line:#d5cdb9;
--topbar-bg:rgba(244,241,234,.78);
/* v8.5 — asterisk requis (WCAG AA validé sur --paper + --paper-2) */
--red:#c8332e;
--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
--display:'Archivo Black',system-ui,sans-serif;
--serif:'Newsreader',Georgia,serif;
--sans:'Inter','Inter-fallback',system-ui,sans-serif;
/* v8.3 — couleurs morceaux Studio (édition limitée drg_music) */
--c-sorciere:#8b5cf6;
--c-telenet:#2c5cff;
--c-salsa:#ff5b2e;
}
/* v9.2 — Palette dark canonique (light mode supprimé)
Documentation : project/charte-graphique-v9.md §2.1 */
[data-theme="dark"]{
/* Tiers de fond — 3 niveaux seulement */
--paper:#080B12; /* bg-base — noir carbone profond */
--paper-2:#0E1422; /* bg-tint — bleu nuit */
--paper-3:#151D2E; /* bg-card — nuit douce */
/* Texte — ivoire + 2 gris clairs lisibles */
--ink:#F4F1EA; /* texte primaire ivoire */
--ink-soft:#C8CEDA; /* texte secondaire gris clair */
--ink-dim:#8D96AA; /* texte tertiaire gris bleuté */
/* Bleu signature Bobby Industries */
--blue:#2563EB; /* bleu électrique pro */
--blue-soft:#60A5FA; /* hover, links actifs */
--blue-deep:#1D4ED8; /* pressed */
/* Highlight ambre rare (≤3% surface) */
--accent:#F59E0B; /* ambre doux */
/* Bordures, topbar, erreur */
--line:#2A3448; /* gris bleuté */
--topbar-bg:rgba(8,11,18,.78);
--red:#EF4444; /* erreur réelle UNIQUEMENT (jamais asterisk) */
}
/* v9.9 CLS — police de repli aux métriques d'Inter (basée sur Arial).
Avant le chargement d'Inter, le texte occupe quasi exactement la même place
qu'une fois la police chargée → quasiment plus de décalage de mise en page. */
@font-face{
font-family:'Inter-fallback';
src:local('Arial');
size-adjust:107.4%;
ascent-override:90.2%;
descent-override:22.48%;
line-gap-override:0%;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
transition:background .4s ease, color .4s ease;
}
/* custom cursor: only on fine-pointer hover-capable devices, motion-friendly users */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
body{cursor:none}
}
@media (max-width:900px){body{cursor:auto}}
/* ── v9.2 · Background "aurora" — 1 halo coloré par track ─────────────
Remplace les 3 orbes drifting. Plus calme, plus moderne, plus carnet.
La couleur change automatiquement selon la route active via --track-aurora. */
/* Grain texture (papier) — renforcé en dark only */
.bg-grain{
position:fixed;inset:0;pointer-events:none;z-index:0;
background-image:url("data:image/svg+xml;utf8, parent */
@media (max-width:640px){
.swz-progress__bar li{
padding:14px 0; /* zone tactile : 14 + 5 + 14 = 33px → +scaleY 1.55 ≈ 44px réel */
margin:-14px 0; /* compense la hauteur visuelle pour ne pas rallonger le composant */
}
.swz-progress__bar li > .swz-progress__seg{
/* le bouton reprend la largeur du pour que tout le padding soit cliquable */
position:relative;z-index:1;
}
}
/* ── v9.8 · T8 — Aurora allégée mobile ─────────────────────────────────── */
/* Régime ≤ 768 : blur réduit + animations ralenties + amplitudes réduites */
@media (max-width:768px){
.bg-aurora::before,.bg-aurora::after{filter:blur(70px)}
.bg-aurora::before{animation:auroraBreath1Mobile 22s ease-in-out infinite}
.bg-aurora::after{animation:auroraBreath2Mobile 28s ease-in-out infinite}
}
@keyframes auroraBreath1Mobile{
0%,100%{opacity:.30}
50% {opacity:.38}
}
@keyframes auroraBreath2Mobile{
0%,100%{opacity:.14}
50% {opacity:.19}
}
/* Régime ≤ 480 : statique (animation OFF, opacity figée à valeur moyenne) */
@media (max-width:480px){
.bg-aurora::before,.bg-aurora::after{animation:none!important}
.bg-aurora::before{opacity:.34}
.bg-aurora::after{opacity:.17}
}
/* Re-confirmation reduced-motion (au cas où la cascade mobile passerait avant) */
@media (max-width:768px) and (prefers-reduced-motion:reduce){
.bg-aurora::before,.bg-aurora::after{animation:none!important}
}
/* perf-mode enrichi v9.8 — au lieu de hide complet, on garde un halo statique léger.
Override de la règle ligne 2397 `body.perf-mode .bg-aurora{display:none}` :
on rétablit l'affichage avec blur économique 50px et animation off.
Préserve l'identité dark vivante même en perf-mode. */
body.perf-mode .bg-aurora{display:block!important}
body.perf-mode .bg-aurora::before,
body.perf-mode .bg-aurora::after{
animation:none!important;
filter:blur(50px)!important;
}
/* ── v9.8 · T9 — Breakpoints intermédiaires 2-col (641-1024) ───────────── */
/* v9.8 itération 2 (revue archi T23) : range élargi de 999 → 1024 pour
couvrir iPad portrait 1000-1024px. Avant : saut visuel 2-col → 1-col à
1000 → 3-col à 1025 (la règle existante l670 `.identities{1fr}` sous
max-width:1000 kickait, puis l666 reprenait à 1001+). Notre v9.8 vient
après dans la source donc cascade gagne sur l670. Vérifié : aucune
règle desktop des 4 composants concernés ne démarre sous 1025. */
@media (min-width:641px) and (max-width:1024px){
/* Accueil — 3 identity-cards → 2 col + 3ème centrée sous (full-row max 560) */
.identities{
grid-template-columns:repeat(2,1fr);
gap:clamp(20px,3vw,32px);
}
.identities > .identity-card:nth-child(3){
grid-column:1 / -1;
max-width:560px;
margin-inline:auto;
}
/* Studio méthode — 5 nœuds en 3 col (3 + 2 propre) */
.sw-flow{
grid-template-columns:repeat(3,1fr);
gap:20px;
}
/* Les arrows ::after entre étapes : à 3-col le tracé custom devient absurde, on les cache */
.sw-flow .sw-flow__step::after{display:none}
/* Parcours — 3 clusters → 2 col + 3ème full-row centrée */
.timeline-clusters{
grid-template-columns:repeat(2,1fr);
gap:24px;
}
.timeline-clusters > :nth-child(3){
grid-column:1 / -1;
max-width:560px;
margin-inline:auto;
}
/* Studio maintenance — 3 cards → 2 col + 3ème full-row centrée */
.sw-maint-grid{
grid-template-columns:repeat(2,1fr);
gap:20px;
}
.sw-maint-grid > :nth-child(3){
grid-column:1 / -1;
max-width:560px;
margin-inline:auto;
}
}
/* ── v9.8 · T10 — Wizard étape 3 — densité mobile ──────────────────────── */
@media (max-width:640px){
/* Eyebrow `// A` `// B` renforcé en taille + couleur track */
.swz-step[data-step="3"] .swz-block__num{
font-size:13px;
color:var(--track-accent, var(--blue));
font-weight:500;
letter-spacing:.08em;
}
/* Titre interne `Ce que tu vends` / `Ce que le site doit faire` */
.swz-step[data-step="3"] .swz-block__title{
font-size:18px;
margin-top:4px;
}
/* Compression du gap entre checkboxes */
.swz-step[data-step="3"] .swz-checks{gap:8px}
/* Bloc B (le 2e dans l'étape) : séparation visuelle marquée */
.swz-step[data-step="3"] .swz-block + .swz-block{
margin-top:32px;
padding-top:32px;
border-top:1px dashed var(--line);
}
}
/* ── v9.8 · T15 — Sticky CTA studio sous 480 : pastille ronde 56×56 ────── */
@media (max-width:480px){
body:has(.page.active[data-route="/studio"]) .cta-sticky.cta-sticky{
/* Pastille circulaire — icône flèche seule, texte clipped accessible */
width:56px;height:56px;
padding:0;
border-radius:50%;
justify-content:center;
right:20px;bottom:20px;
overflow:hidden;
font-size:0; /* coupe le texte visuel; ::after rajoute la flèche centrée */
}
/* Le texte natif "Démarrer mon projet →" : on cache la partie texte mais
on conserve la flèche via ::after pour un rendu net */
body:has(.page.active[data-route="/studio"]) .cta-sticky.cta-sticky::after{
content:'→';
font-family:var(--sans, var(--display));
font-size:22px;
line-height:1;
color:#fff;
font-weight:600;
}
/* Décale le back-to-top pour éviter le chevauchement avec la pastille (56 + 20 + 8 = 84) */
body:has(.page.active[data-route="/studio"]) .back-to-top{bottom:84px}
}
/* Reduced-motion : pas de pulse pour la pastille */
@media (max-width:480px) and (prefers-reduced-motion:reduce){
body:has(.page.active[data-route="/studio"]) .cta-sticky::before{animation:none}
}
/* ── v9.8 · T13 — Ultrawide caps (≥ 1640) ──────────────────────────────── */
@media (min-width:1640px){
/* Skill-cards-v83 : cap le corps à 720 pour éviter une 1fr disproportionnée */
.skill-card-v83{grid-template-columns:minmax(0, 720px) 280px}
/* Sw-offers : la ladder déjà à 48px + offers en 2-col — on cap chaque offre interne via max-width */
.sw-offers{max-width:1100px;margin-inline:auto}
}
/* ── v9.8 · Transverse typographie ─────────────────────────────────────── */
/* h1.mega : palier mobile plus respirant — clamp(40,11vw,128) au lieu de (48,8.4vw,128) sous 640.
v9.8 itération 2 (revue archi T22) : on RETIRE le min-height calc qu'on
avait rajouté ici — il réservait ~192px à 375px, dégradant LCP/whitespace
alors que la règle ligne ~3243 `h1.mega{min-height:0;contain:none}` sous
(max-width:768px) libère explicitement l'espace mobile. On laisse cette
règle 768 originale gagner : le seul vrai apport mobile reste le clamp. */
@media (max-width:640px){
h1.mega{font-size:clamp(40px,11vw,128px)}
/* Eyebrows : 12px sous 640 au lieu de 11px (lisibilité bras tendu) */
.eyebrow{font-size:12px}
}
/* ── v9.8 · Marquee — conservée mobile (cf. handoff §10) — pas de modif ─ */
/* Volontairement aucune règle ici : la marquee continue de tourner 30s. */
/* ── v9.8 · T24 — Music dock .pbtn touch targets ≥44px sous 640 ─────────── */
/* Fix loop court : l'override existant ligne 3516 est gated par
(pointer:coarse) qui ne match pas toujours en DevTools mobile emul
(viewport-only). On double avec un gate (max-width:640px) pour assurer
que le bounding rect de chaque .pbtn atteigne 44×44.
Technique :
- .pbtn (prev/next, 16×16 svg sans width/height de box) : min-width/
min-height 44 → la box grandit à 44, le svg reste centré via flex
align/justify (l1416). Aucune modif visuelle de l'icône.
- .pbtn.pp (disque 36×36 visuel) : la box parent passe à 44×44 via
min-* ; on déplace le disque visuel 36×36 sur un ::after centré.
Le background:var(--ink) original n'est plus appliqué directement
sur la box .pp (annulé en transparent) ; le disque vit dans le
::after. Le svg garde son z-index supérieur via position:relative. */
@media (max-width:640px){
.pbtn{
min-width:44px;min-height:44px;
position:relative;
}
/* .pp : on annule width/height fixes (sinon ils écrasent min-*) et le
background direct (déplacé sur ::after pour garder le disque 36×36
visuellement, indépendamment de la box parent à 44×44). */
.pbtn.pp{
width:44px;height:44px;
background:transparent;
border-radius:0;
}
.pbtn.pp::after{
/* recrée le disque 36×36 centré au-dessus du fond transparent */
content:'';
position:absolute;
top:50%;left:50%;
width:36px;height:36px;
background:var(--ink);
border-radius:50%;
transform:translate(-50%,-50%);
z-index:0;
transition:background .18s;
}
.pbtn.pp:hover::after{background:var(--blue)}
/* svg du .pp doit rester au-dessus du ::after (sinon caché derrière le
disque). Le ::after est en z-index:0, on remonte le svg à 1. */
.pbtn.pp > svg{position:relative;z-index:1}
}
/* ── v9.8 · T25 — swz-progress li tap zone ≥44px sous 640 ───────────────── */
/* Fix loop court : T11 avait posé padding:14px 0 + margin:-14px 0 →
14+5+14 = 33px (le contenu seg est ~5px). Manque 11px verticaux pour
atteindre 44. On bascule sur min-height:44 sur le + flex center
pour garder le seg visuellement centré sans toucher au padding (donc
sans modifier la position visuelle de la barre horizontale). */
@media (max-width:640px){
.swz-progress__bar li{
min-height:44px;
display:flex;
align-items:center;
/* padding:14px 0 + margin:-14px 0 conservés de T11 — la barre visuelle
reste à la même place (les marges négatives neutralisent la hauteur
ajoutée par le padding, et le min-height:44 absorbe les 11px
manquants sans déborder car les marges négatives compensent). */
}
}
/* ═══════════════════════════════════════════════════════════════════════════
FIN v9.8 — RESPONSIVE CONSOLIDÉ
═══════════════════════════════════════════════════════════════════════════ */