/* ============================================================ DOONI — COUCHE WEB (web layer) ------------------------------------------------------------ Ce fichier N'INVENTE PAS la marque. Il ajoute une SURFACE WEB par-dessus le socle de marque (colors_and_type.css) : · rôles couleur (couleur = action / trace de travail, jamais déco) · échelle typo élargie + familles "affiche d'atelier" · grille-outil exposée (bordures franches, modules numérotés) · états d'interaction (hover / focus / actif) Une racine, deux surfaces. — voir brief §0. ============================================================ */ /* ---- Couche marque (socle canonique) : couleurs, post-it, type de base ---- */ @import url('./colors_and_type.css'); /* ---- IBM Plex Mono uniquement (Anton/Archivo/Merriweather/Sacramento déjà chargés par colors_and_type.css) ---- */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* ============================================================ 1 · RÔLES COULEUR — mur blanc / post-it ------------------------------------------------------------ La couleur ne décore jamais. Elle SIGNALE. Surface = mur blanc (white). Structure = noir. Les 3 post-it legacy reçoivent chacun UN rôle : ============================================================ */ --surface: var(--white); /* le mur qui attend */ --structure: var(--black); /* grille, bordures, type de structure */ --action-primary: var(--pink); /* ROSE → l'action dominante : café + tour */ --action-secondary: var(--cyan); /* CYAN → actions secondaires, nav, liens */ --trace: var(--yellow);/* JAUNE → trace de travail : labels du lieu, annotations, marques d'activité */ --on-primary: var(--black); /* texte sur rose — un post-it s'écrit en NOIR */ --on-secondary: var(--black); /* texte sur cyan */ --on-trace: var(--black); /* texte sur jaune */ /* ============================================================ 2 · TYPOGRAPHIE WEB (échelle élargie) ------------------------------------------------------------ Affiche : ANTON (condensée, signalétique d'atelier) — hero & chiffres. Titres : ARCHIVO (grotesque, 600–900) — sections, UI. Lecture : MERRIWEATHER (socle marque) — corps & leads, contrepoint humain. Labels : IBM PLEX MONO — étiquettes fonctionnelles, fiche technique. ============================================================ */ --font-poster: 'Anton', 'Archivo', sans-serif; --poster-weight: 400; /* Anton = 400 ; Archivo = 700/900 */ --font-headline: 'Archivo', system-ui, sans-serif; --font-read: var(--font-sans); /* Merriweather (marque) */ --font-tech: 'IBM Plex Mono', ui-monospace, monospace; /* échelle web — plus haute que l'échelle poster du socle */ --web-display: clamp(64px, 11.5vw, 184px); /* hero impact (Anton) */ --web-h1: clamp(38px, 6.2vw, 92px); /* H1 confrontation */ --web-h2: clamp(32px, 4.4vw, 64px); /* titres de section */ --web-h3: clamp(22px, 2.2vw, 30px); --web-stat: clamp(56px, 9vw, 132px); /* "100 m²" (Anton) */ --web-lead: clamp(19px, 1.7vw, 24px); --web-body: 17px; --web-tech: 13px; /* labels mono */ --web-tech-sm: 11px; --lh-poster: 0.86; --lh-head: 0.96; --trk-tech: 0.16em; /* labels mono très espacés (signalétique) */ --trk-poster: 0.005em; /* ============================================================ 3 · GRILLE-OUTIL EXPOSÉE (intensité par défaut ≈ 7/10) ------------------------------------------------------------ Bordures franches noires = structure visible. Modules numérotés (01 / 02 …) = fiche technique. ============================================================ */ --rule: 2px solid var(--structure); /* bordure franche */ --rule-w: 2px; --hair: 1px solid var(--ink-300); /* division fine */ --rule-color: var(--structure); --shell-max: 1280px; --gutter: clamp(20px, 4vw, 56px); /* ============================================================ 4 · ÉTATS / MOTION (rapides, plats) ============================================================ */ --t-fast: 130ms ease-out; --focus-ring: 3px solid var(--structure); } /* ============================================================ RESET / BASE ============================================================ */ * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-read); color: var(--ink-700); background: var(--surface); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } ::selection { background: var(--trace); color: #000; } a { color: inherit; } :focus-visible { outline: var(--focus-ring); outline-offset: 3px; } /* ============================================================ TYPE CLASSES — couche web ============================================================ */ .w-display { font-family: var(--font-poster); font-weight: var(--poster-weight); font-size: var(--web-display); line-height: var(--lh-poster); letter-spacing: var(--trk-poster); text-transform: uppercase; color: var(--structure); margin: 0; } .w-h1 { font-family: var(--font-headline); font-weight: 800; font-size: var(--web-h1); line-height: var(--lh-head); letter-spacing: -0.01em; text-transform: uppercase; color: var(--structure); margin: 0; } .w-h2 { font-family: var(--font-headline); font-weight: 800; font-size: var(--web-h2); line-height: 1.0; letter-spacing: -0.01em; text-transform: uppercase; color: var(--structure); margin: 0; } .w-h3 { font-family: var(--font-headline); font-weight: 700; font-size: var(--web-h3); line-height: 1.1; color: var(--structure); margin: 0; } .w-stat { font-family: var(--font-poster); font-weight: var(--poster-weight); font-size: var(--web-stat); line-height: 0.82; color: var(--structure); margin: 0; text-transform: uppercase; } .w-lead { font-family: var(--font-read); font-weight: 400; font-size: var(--web-lead); line-height: 1.5; color: var(--ink-700); margin: 0; } .w-body { font-family: var(--font-read); font-weight: 400; font-size: var(--web-body); line-height: 1.65; color: var(--ink-700); } .w-read-strong { font-weight: 700; color: var(--structure); } /* label fonctionnel — étiquette mono "fiche technique" */ .w-tech { font-family: var(--font-tech); font-weight: 500; font-size: var(--web-tech); letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-700); } .w-tech-sm { font-family: var(--font-tech); font-weight: 500; font-size: var(--web-tech-sm); letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-500); } /* ============================================================ GRILLE / SHELL / MODULES ============================================================ */ .shell { max-width: var(--shell-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* rails latéraux : la marge de la grille rendue visible */ .framed { border-left: var(--rule); border-right: var(--rule); } .module { position: relative; border-top: var(--rule); } /* en-tête de module : numéro + label fonctionnel, comme une fiche technique */ .module-head { display: flex; align-items: baseline; gap: 16px; padding: 14px var(--gutter); border-bottom: var(--hair); } .module-head .idx { font-family: var(--font-tech); font-weight: 600; font-size: var(--web-tech); letter-spacing: 0.1em; color: var(--structure); } .module-head .lab { font-family: var(--font-tech); font-weight: 500; font-size: var(--web-tech); letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-500); } .module-head .spacer { flex: 1; } /* ============================================================ POST-IT LABEL — la "trace de travail" (jaune par défaut) ------------------------------------------------------------ Étiquette collée, légèrement tournée. Couleur = trace. ============================================================ */ .postit { display: inline-flex; align-items: center; gap: 10px; background: var(--trace); color: var(--on-trace); font-family: var(--font-tech); font-weight: 600; font-size: var(--web-tech); letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 14px; transition: transform var(--t-fast); } .postit.cy { background: var(--action-secondary); color: var(--on-secondary); } .postit.pk { background: var(--action-primary); color: var(--on-primary); } /* ============================================================ BOUTONS — aplats de couleur = ACTION (jamais déco) ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-headline); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; border: var(--rule); background: var(--surface); color: var(--structure); padding: 16px 26px; transition: filter var(--t-fast), transform var(--t-fast), background var(--t-fast); text-decoration: none; white-space: nowrap; line-height: 1; } .btn .arrow { transition: transform var(--t-fast); } .btn:hover .arrow { transform: translateX(5px); } .btn:hover { filter: brightness(0.96); } .btn:active { transform: translateY(1px); } /* action dominante : café + tour */ .btn.primary { background: var(--action-primary); color: var(--on-primary); border-color: var(--structure); } .btn.primary:hover { filter: brightness(0.93); } /* action secondaire : nav, tour, whatsapp */ .btn.secondary { background: var(--action-secondary); color: var(--on-secondary); } .btn.ghost { background: var(--surface); color: var(--structure); } .btn.lg { font-size: 18px; padding: 20px 32px; } /* lien-action souligné (CTA dans un module / carte) */ .linkcta { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-headline); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--structure); background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; line-height: 1; } .linkcta .u { box-shadow: inset 0 -2px 0 var(--action-secondary); transition: box-shadow var(--t-fast); } .linkcta .arrow { transition: transform var(--t-fast); } .linkcta:hover .arrow { transform: translateX(6px); } .linkcta:hover .u { box-shadow: inset 0 -10px 0 var(--action-secondary); } /* lien discret (whatsapp) */ .softlink { font-family: var(--font-read); font-size: 16px; color: var(--ink-700); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; background: none; border: none; padding: 0; } .softlink:hover { color: var(--structure); } /* ============================================================ PLACEHOLDER PHOTO — "fiche technique", pas de fausse photo ============================================================ */ .shot { position: relative; background: var(--ink-100); overflow: hidden; border: var(--rule); } .shot .meta { position: absolute; left: 0; bottom: 0; right: 0; display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface); border-top: var(--rule); } /* divider franc */ .bar { height: var(--rule-w); background: var(--structure); border: none; } /* ============================================================ INTENSITÉ DE GRILLE — pilotée par [data-grid] 0 = quasi mur blanc · 7 (défaut) · 10 = brutalisme plein ============================================================ */ [data-grid="low"] { --rule-w: 0px; } [data-grid="low"] .framed { border-left: none; border-right: none; } [data-grid="low"] .module { border-top: var(--hair); } [data-grid="low"] .btn { border: 2px solid transparent; } [data-grid="low"] .btn.ghost { border-color: var(--ink-300); } [data-grid="low"] .shot { border: none; } [data-grid="low"] .module-head { border-bottom: none; } [data-grid="high"] { --rule-w: 3px; } [data-grid="high"] .rule, [data-grid="high"] .module { border-top-width: 3px; }