// Proposition A — "Cabinet" (avec FlipCards) // Pur N&B · grille stricte · cartes services et méthode flippables au survol // ─── REGISTRE D'IMAGES ──────────────────────────────────────────── // Photos N&B compressées (sips q82, max 1800px). Sources PNG ~15 MB → JPG ~2.6 MB. const IMAGES = { heroPortrait: 'assets/photos/heroPortrait.jpg', // 3:4 — fondateur en costume, bureau privé atelierBanner: 'assets/photos/atelierBanner.jpg', // 16:5 — atelier, table de travail, lumière haute service01: 'assets/photos/service01.jpg', // 3:4 — plan d'architecte + compas + règle (Audit) service02: 'assets/photos/service02.jpg', // 3:4 — COO à la demande service03: 'assets/photos/service03.jpg', // 3:4 — Systems Sprint method01: 'assets/photos/method01.jpg', // 4:5 — Mesurer method02: 'assets/photos/method02.jpg', // 4:5 — Tailler (sculpteur) method03: 'assets/photos/method03.jpg', // 4:5 — Transmettre (passation de clé) }; const A = () => { const ink = (typeof window !== 'undefined' && window.__boInk) || '#000000'; const paper = (typeof window !== 'undefined' && window.__boPaper) || '#ffffff'; const borderI = (typeof window !== 'undefined' && window.__boBorder) || 0.16; const muted = `rgba(255,255,255,${Math.max(0.3, borderI * 3)})`; const muted2 = `rgba(255,255,255,${Math.max(0.55, borderI * 4.5)})`; const line = `rgba(255,255,255,${borderI})`; const isItalic = typeof window !== 'undefined' ? window.__boItalic !== false : true; const isUpper = typeof window !== 'undefined' ? window.__boUppercase !== false : true; const showHint = typeof window !== 'undefined' ? window.__boFlipHint !== false : true; const wrap = { width: 1440, background: ink, color: paper, fontFamily: 'var(--bo-body, "Inter", -apple-system, sans-serif)', fontSize: 'calc(var(--bo-base, 14px))', lineHeight: 1.5, }; const display = { fontFamily: 'var(--bo-display, "Cormorant Garamond", "Times New Roman", serif)', fontWeight: 400, fontStyle: isItalic ? 'italic' : 'normal', letterSpacing: 'var(--bo-letter-spacing, 0)', }; const mono = { fontFamily: 'var(--bo-mono, "JetBrains Mono", monospace)', fontSize: 10, letterSpacing: 'var(--bo-mono-tracking, 0.18em)', textTransform: isUpper ? 'uppercase' : 'none', }; const accent = 'var(--bo-accent, #ffffff)'; const menuVariant = (typeof window !== 'undefined' && window.__boMenu) || 'pill'; const Photo = ({ label, hint, src, alt, h = '100%', ratio, withHint = true }) => (
{src ? ( {alt ) : ( {withHint && (
● {label} {ratio && {ratio}}
Suggestion
« {hint} »
)} )}
); const Grid = ({ children, style: s = {} }) => (
{children}
); const services = [ { ref: '01', title: 'Audit Opérations', hint: 'Plan d\'architecte vu de haut, calque, compas.', desc: 'Cartographie complète de vos process et de votre stack. Diagnostic chirurgical livré sous 14 jours, dossier complet et feuille de route à 90 jours.', dur: '14 jours', list: ['Entretiens fondateur · équipe', 'Cartographie systèmes', 'Diagnostic priorisé', 'Feuille de route'], }, { ref: '02', title: 'COO à la demande', hint: 'Bureau privé en N&B — fauteuil, carnets, lumière du soir.', desc: 'Présence continue à temps partiel. Stratégie, exécution, processus, recrutement clé, gouvernance produit.', dur: '3 — 12 mois', list: ['Présence 1–3 j/sem.', 'Pilotage opérationnel', 'Recrutement clé', 'Comité mensuel'], }, { ref: '03', title: 'Systems Sprint', hint: 'Établi d\'horloger — outils alignés, mécanisme ouvert.', desc: 'Intervention courte sur un système précis : automation, stack SaaS, finance, RH, data. Diagnostic, redesign, installation.', dur: '4 semaines', list: ['Périmètre unique', 'Conception sur mesure', 'Mise en place', 'Transfert documenté'], }, ]; const methode = [ { k: 'I.', t: 'Mesurer', hint: 'Plan de bureau vu de haut — carnet, mètre, esquisses, lumière rasante.', fr: 'Trois semaines pour cartographier votre opération. Entretiens, analyses, observation silencieuse.', }, { k: 'II.', t: 'Tailler', hint: 'Mains d\'artisan en train de travailler la matière — gros plan.', fr: 'Conception de systèmes spécifiques à votre échelle. Aucun template. Mise en œuvre par étapes.', }, { k: 'III.', t: 'Transmettre', hint: 'Passation d\'objet entre deux mains — clé, document, instrument.', fr: 'Documentation, formation, transition. Notre objectif final : votre indépendance opérationnelle.', }, ]; // ─── SERVICE CARD : flippable ───────────────────────────────────── const ServiceCard = ({ s }) => { const front = (
{s.ref}
{s.title}
{showHint &&
↻ Survoler
}
); const back = (
{s.ref}
{s.title}

{s.desc}

{s.list.map((x) => (
{x}
))}
Durée
{s.dur}
); return ; }; // ─── MÉTHODE CARD : flippable photo / explication ──────────────── const MethodCard = ({ m }) => { const front = (
— {m.k}
{m.t}
); const back = (
— {m.k}
{m.t}

{m.fr}

{showHint &&
↻ Survoler pour la photo
}
); return ; }; const Logo = () => (
Bespoke Operations
BESPOKE OPERATIONS
); const ResaBtn = () => ( ); const NumberedNav = () => (
EN
); const ClassicNav = () => (
); const CenteredNav = () => (
Bespoke Operations
); const HamburgerNav = () => (
); const PillVariantNav = () => (
{window.PillNav && }
EN
); const Nav = () => { if (menuVariant === 'classic') return ; if (menuVariant === 'centered') return ; if (menuVariant === 'hamburger') return ; if (menuVariant === 'pill') return ; return ; }; return (
{/* ─── NAV ─── */}
); }; window.A = A;