/* ============================================================================ TRIMBOUR — kit de design commun Trimbour Rénov · Trimbour Energies La signature vient du logo Energies : des panneaux inclinés sur un soleil. Les parallélogrammes marquent les sections et les étapes, le disque solaire marque ce qu'on touche, les filets sont fins et pleins. L'ancienne métaphore « réglette graduée » a été retirée à la demande de Tristan. Aucun chiffre d'ordre nulle part : la numérotation des parties donnait un effet de brouillon. Les seuls chiffres affichés sont des mesures. POUR BASCULER D'UNE MARQUE À L'AUTRE, une seule chose à faire : poser data-marque="energies" sur . Rien d'autre ne change. ========================================================================= */ /* --------------------------------------------------------------------------- 0. POLICES Auto-hébergées, variables, aucune requête vers un tiers. Le kit tient en un seul fichier : cette feuille plus le dossier fonts/. ------------------------------------------------------------------------------ */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(./fonts/bricolage-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(./fonts/bricolage-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(./fonts/schibsted-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(./fonts/schibsted-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --------------------------------------------------------------------------- 1. JETONS Couleurs écrites en hexadécimal pour les navigateurs anciens (le public est rural, tous âges, souvent sur du matériel qui a vécu), puis redéfinies en OKLCH quand le navigateur sait le lire. Les valeurs OKLCH sont la source ; les hex en sont la conversion exacte. Tous les neutres sont teintés vers la teinte de marque : aucun gris pur, ni #000 ni #fff nulle part. ------------------------------------------------------------------------------ */ :root { /* Fonds et encres — identiques sur les deux marques */ --paper: #F6F3ED; /* papier de plan */ --paper-2: #EFEAE0; /* bandes réglées */ --paper-3: #E5DED2; /* creux, emplacements photo */ --ink: #201710; /* bitume chaud */ --ink-2: #5F554B; /* texte secondaire */ --ink-3: #6F665C; /* annotations : 5,11 sur --paper, 4,70 sur --paper-2 */ --rule: #D9D2C8; /* filets courants */ --rule-2: #C3BAAD; /* filets appuyés */ --night: #1F150D; /* pied de page */ --night-2: #40362E; /* filets sur fond nuit */ --on-night: #F6F3ED; --on-night-2: #A49D95; /* 6,71 sur --night */ /* Accent — LE point de bascule entre les deux marques. --accent : vif, réservé aux panneaux, chiffres et marques. Jamais de petit texte dessus ni dedans (4,10 sur papier). --accent-deep : sombre, porte le petit texte et la section noyée (7,03). --accent-wash : voile, fonds de survol. */ --accent: #CC4D17; --accent-deep: #923312; --accent-wash: #FCE9DB; /* Fond des boutons d'appel, et la couleur de texte qui va dessus. Séparé de --accent-deep : chaque marque prend celle des deux qui donne à la fois le meilleur contraste et la couleur la plus juste. Rénov : minium sombre + papier (7,03). Le minium vif serait à 4,10. */ --accent-btn: var(--accent-deep); --accent-on: var(--paper); /* Typographie */ --f-display: 'Bricolage Grotesque', system-ui, sans-serif; --f-texte: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif; /* Trame */ --gout: clamp(20px, 4vw, 44px); /* gouttière du contenu */ --max: 1240px; --sec: clamp(60px, 8vw, 128px); /* respiration entre sections */ /* Mouvement — sortie exponentielle, ni rebond ni élastique */ --ease: cubic-bezier(.22, 1, .36, 1); --vite: .2s; --lent: .72s; } @supports (color: oklch(50% 0.1 90)) { :root { --paper: oklch(0.966 0.009 85); --paper-2: oklch(0.938 0.014 82); --paper-3: oklch(0.903 0.018 80); --ink: oklch(0.215 0.020 62); --ink-2: oklch(0.455 0.020 65); --ink-3: oklch(0.515 0.019 70); --rule: oklch(0.868 0.016 78); --rule-2: oklch(0.792 0.020 76); --night: oklch(0.205 0.022 60); --night-2: oklch(0.340 0.020 58); --on-night: oklch(0.966 0.009 85); --on-night-2: oklch(0.700 0.014 72); --accent: oklch(0.585 0.172 40); --accent-deep: oklch(0.455 0.135 38); --accent-wash: oklch(0.945 0.028 60); } } /* ---- La bascule de marque ------------------------------------------------ Rénov : minium, le rouge-orangé de l'antirouille sur la ferronnerie. Energies : ambre sodium, la couleur du lampadaire au sodium — et le clin d'œil au stockage sodium-ion. Les deux sont chaudes : on voit la même maison. Elles ne se confondent pas : l'une est sombre et terreuse, l'autre claire et rayonnante. */ [data-marque="energies"] { --accent: #F8931F; /* l'orange du logo, relevé sur le fichier source */ --accent-deep: #974F00; /* 5,52 sur papier — porte le texte */ --accent-wash: #FDEDDD; /* Ici l'orange vif porte le bouton, avec l'encre par-dessus : 7,71. C'est le soleil du logo, il doit rayonner. */ --accent-btn: var(--accent); --accent-on: var(--ink); } @supports (color: oklch(50% 0.1 90)) { [data-marque="energies"] { --accent: oklch(0.754 0.166 61.8); --accent-deep: oklch(0.505 0.122 57); --accent-wash: oklch(0.955 0.028 68); } } /* --------------------------------------------------------------------------- 2. BASE ------------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Le runtime injecte `html,body{height:100%}` et `#dc-root>.sc-host{height:100%}` pour les présentations pleine page. Ce site est une page longue qui défile : plutôt que d'écraser ces règles, tout le contenu vit dans .tb-page, dont la hauteur est naturelle. */ .tb-page { position: relative; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-texte); font-size: 17px; line-height: 1.6; text-wrap: pretty; -webkit-font-smoothing: antialiased; } a { color: var(--accent-deep); text-decoration: none; } /* Chiffres alignés là où ils se comparent : repères, numéros de ligne, numéros de téléphone. Jamais sur le texte courant — la fonte tabulaire élargit aussi la virgule et le point, qui sont des séparateurs décimaux, et fabrique des espaces parasites dans la prose française. */ .tb-appel__n, .tb-barre__n, .tb-tel { font-variant-numeric: tabular-nums; } img, svg { display: block; max-width: 100%; } input, textarea, button, select { font: inherit; color: inherit; } ::placeholder { color: var(--ink-3); } ::selection { background: var(--accent-wash); color: var(--ink); } a, button, [role="button"] { -webkit-tap-highlight-color: transparent; } :where(a, button, [role="button"], input, summary):focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; } .tb-wrap { max-width: var(--max); margin: 0 auto; padding-left: max(var(--gout), env(safe-area-inset-left)); padding-right: max(var(--gout), env(safe-area-inset-right)); } .tb-sec { padding-top: var(--sec); padding-bottom: var(--sec); } .tb-band { background: var(--paper-2); border-block: 1px solid var(--rule); } .tb-band + .tb-band { border-top: 0; } /* Fonds noyés : la section EST la couleur. */ .tb-nuit { background: var(--night); color: var(--on-night); } .tb-nuit a { color: var(--accent); } .tb-drench { background: var(--accent-deep); color: var(--paper); } .tb-drench a { color: var(--paper); } /* --------------------------------------------------------------------------- 3. LA SIGNATURE PANNEAU Le motif vient du logo : des panneaux inclinés sur un soleil. Les parallélogrammes (rectangles en skewX(-18deg)) marquent les têtes de section (.tb-repere::before) et les rangs d'étapes (.tb-etapes__r::before) ; le disque solaire marque les points qu'on touche (curseurs du simulateur). Rien d'autre — pas d'instrument, pas de graduations : Tristan n'en voulait pas. ------------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------- 4. TYPOGRAPHIE Échelle modulaire, rapport ≥ 1,4 entre les degrés. Le display porte les titres et les chiffres ; le texte courant reste plafonné à 68 caractères. ------------------------------------------------------------------------------ */ .tb-h1, .tb-h2, .tb-h3 { margin: 0; font-family: var(--f-display); font-optical-sizing: auto; font-weight: 600; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; } .tb-h1 { font-size: clamp(38px, 6.4vw, 88px); max-width: 17ch; } .tb-h2 { font-size: clamp(30px, 4.4vw, 60px); max-width: 19ch; } .tb-h3 { font-size: clamp(24px, 3vw, 40px); line-height: 1.1; letter-spacing: -.024em; max-width: 24ch; } .tb-lead { margin: 0; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 48ch; } .tb-txt { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 68ch; } .tb-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); max-width: 68ch; } /* Libellé de relevé : Bricolage resserré, capitales, interlettrage ouvert. L'axe de chasse évite d'embarquer une troisième fonte. */ .tb-lbl { font-family: var(--f-display); font-stretch: 78%; font-weight: 600; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; color: var(--ink-2); } .tb-lbl--accent { color: var(--accent-deep); } .tb-lbl--nuit { color: var(--on-night-2); } /* Dans un contexte qui porte déjà sa couleur — section noyée, bouton d'appel, barre fixe — le libellé la reprend au lieu d'imposer l'encre secondaire. */ .tb-drench .tb-lbl, .tb-appel .tb-lbl, .tb-barre .tb-lbl { color: inherit; } /* --------------------------------------------------------------------------- 5. LE REPÈRE DE SECTION Trois panneaux du logo, le libellé, puis un filet fin jusqu'au bord. ------------------------------------------------------------------------------ */ .tb-repere { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(24px, 3vw, 40px); } .tb-repere::before { content: ''; flex-shrink: 0; width: 38px; height: 10px; transform: skewX(-18deg); transform-origin: left bottom; background-image: repeating-linear-gradient(to right, var(--accent) 0 10px, transparent 10px 14px); } .tb-repere__t { flex-shrink: 0; } .tb-repere::after { content: ''; flex: 1; height: 1px; min-width: 24px; background: var(--rule-2); transform-origin: left center; } .tb-nuit .tb-repere::after { background: var(--night-2); } .tb-drench .tb-repere::after { background: rgba(246, 243, 237, .35); } /* --------------------------------------------------------------------------- 6. LE CHIFFRE CLÉ Valeur, filet fin, désignation. Les flèches et lignes d'attache de l'ancienne cote de dessin technique ont été retirées avec le reste de la métaphore d'instrument ; le balisage (.tb-cote__l et ses deux ) reste le même, seuls les sont éteints. ------------------------------------------------------------------------------ */ .tb-cotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(26px, 3.4vw, 54px); } .tb-cote { display: grid; gap: 9px; } .tb-cote__v { font-family: var(--f-display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(32px, 4vw, 50px); line-height: 1; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; } .tb-cote__l { display: block; height: 1px; background: var(--rule-2); transform-origin: left center; } .tb-cote__l i { display: none; } .tb-cote__k { color: var(--ink-2); } .tb-nuit .tb-cote__v, .tb-drench .tb-cote__v { color: var(--on-night); } .tb-nuit .tb-cote__l { background: var(--night-2); } .tb-drench .tb-cote__l { background: rgba(246, 243, 237, .35); } .tb-nuit .tb-cote__k { color: var(--on-night-2); } /* --------------------------------------------------------------------------- 7 bis. LA CARTE Une prestation, un public. Icône filaire, titre, deux lignes, un renvoi discret dont l'écart s'ouvre au survol. Deux familles, deux traitements — claires pour les travaux, sombres pour les publics — pour que deux grilles ne se suivent jamais à l'identique. ------------------------------------------------------------------------------ */ .tb-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: clamp(12px, 1.4vw, 18px); } /* Cinq publics : sans ce resserrement la grille tombe en 4 + 1 et laisse une carte orpheline sur une ligne vide. */ .tb-cartes--serre { grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); } .tb-carte { position: relative; display: flex; flex-direction: column; gap: 11px; padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px); background: var(--paper); border: 1px solid var(--rule); color: var(--ink); transition: transform .42s var(--ease), box-shadow .42s var(--ease), border-color var(--vite) ease; } .tb-carte:hover, .tb-carte:focus-visible { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(31, 21, 13, .10); border-color: var(--rule-2); } .tb-carte__i { width: 33px; height: 33px; color: var(--accent); margin-bottom: 3px; flex-shrink: 0; } .tb-carte__t { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: -.018em; } .tb-carte__d { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); flex: 1; } .tb-carte__a { display: flex; align-items: center; gap: 8px; margin-top: 5px; color: var(--accent-deep); transition: gap var(--vite) var(--ease); } .tb-carte:hover .tb-carte__a, .tb-carte:focus-visible .tb-carte__a { gap: 14px; } /* La carte ouverte : elle casse la série et invite à décrire autre chose. */ .tb-carte--ouverte { background: none; border: 1px dashed var(--rule-2); } .tb-carte--ouverte:hover, .tb-carte--ouverte:focus-visible { border-color: var(--accent); box-shadow: none; } /* Cartes sombres : les publics. Même structure, monde inversé. */ .tb-carte--nuit { background: var(--night); border-color: var(--night); color: var(--on-night); } .tb-carte--nuit .tb-carte__d { color: var(--on-night-2); } /* L'accent minium ne donne que 3,97 sur le fond nuit : réservé à l'icône, qui n'est pas du texte. Le renvoi passe en papier. */ .tb-carte--nuit .tb-carte__a { color: var(--on-night); } .tb-carte--nuit:hover, .tb-carte--nuit:focus-visible { box-shadow: 0 16px 40px rgba(31, 21, 13, .22); border-color: var(--night); } /* --------------------------------------------------------------------------- 8. LE CADRE D'IMAGE Tant que la photo réelle manque, le cadre reste honnête : une légende de ce qui doit venir. Jamais de faux contenu présenté comme vrai. ------------------------------------------------------------------------------ */ .tb-cadre { position: relative; margin: 0; background: var(--paper-3); color: var(--ink-2); border: 1px solid var(--rule-2); aspect-ratio: 4 / 3; overflow: hidden; } .tb-cadre--4x5 { aspect-ratio: 4 / 5; } .tb-cadre--1x1 { aspect-ratio: 1 / 1; } .tb-cadre--3x2 { aspect-ratio: 3 / 2; } .tb-cadre--16x9 { aspect-ratio: 16 / 9; } .tb-cadre > image-slot, .tb-cadre > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tb-cadre__ref { position: absolute; top: 0; left: 0; z-index: 3; padding: 6px 11px; background: var(--ink); color: var(--paper); } .tb-cadre__leg { position: absolute; right: 14px; bottom: 12px; left: 14px; z-index: 3; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); text-align: right; } .tb-cadre--pleine .tb-cadre__leg { color: var(--paper); text-shadow: 0 1px 3px rgba(31, 21, 13, .6); } /* --------------------------------------------------------------------------- 9. L'APPEL Le seul geste attendu. Fond en accent sombre, texte papier : 7,03 sur Rénov, 5,52 sur Energies. L'accent vif ne porte jamais de petit texte. ------------------------------------------------------------------------------ */ .tb-appel { display: inline-flex; align-items: center; gap: 15px; padding: 15px 24px; background: var(--accent-btn); color: var(--accent-on); border: 1px solid var(--accent-btn); transition: background var(--vite) ease, border-color var(--vite) ease, transform var(--vite) var(--ease); } .tb-appel:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-2px); } .tb-appel__k { display: block; opacity: .78; margin-bottom: 5px; } .tb-appel__n { display: block; font-family: var(--f-display); font-weight: 600; font-size: 25px; line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; } .tb-appel--grand { padding: 19px 28px; } .tb-appel--grand .tb-appel__n { font-size: clamp(25px, 2.8vw, 34px); } .tb-appel--menu { padding: 11px 17px; gap: 10px; } .tb-appel--menu .tb-appel__n { font-size: 15.5px; letter-spacing: -.005em; } /* Sur fond noyé, le bouton s'inverse : papier plein, texte accent sombre. */ .tb-drench .tb-appel { background: var(--paper); border-color: var(--paper); color: var(--accent-deep); } .tb-drench .tb-appel:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* Lien d'appel simple, souligné d'un filet fin. */ .tb-tel { display: inline-block; font-family: var(--f-display); font-weight: 600; font-size: 19px; letter-spacing: -.015em; color: var(--accent-deep); padding-bottom: 3px; background-image: linear-gradient(var(--rule-2), var(--rule-2)); background-size: 100% 1px; background-position: left bottom; background-repeat: no-repeat; transition: color var(--vite) ease; } .tb-tel:hover { color: var(--ink); } .tb-nuit .tb-tel { color: var(--accent); background-image: linear-gradient(var(--night-2), var(--night-2)); } .tb-nuit .tb-tel:hover { color: var(--on-night); } /* --------------------------------------------------------------------------- 10. LE LOGOTYPE La marque est un talon de mètre : un carré d'accent portant trois graduations. Le même objet sur les deux marques, la couleur seule change. ------------------------------------------------------------------------------ */ .tb-marque { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); } .tb-marque__m { width: 28px; height: 28px; flex-shrink: 0; background-color: var(--accent-deep); background-image: repeating-linear-gradient(to bottom, var(--paper) 0 1.5px, transparent 1.5px 7px); background-size: 10px 100%; background-position: right center; background-repeat: no-repeat; } .tb-marque__w { display: flex; flex-direction: column; gap: 2px; line-height: 1; } .tb-marque__n { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -.022em; } .tb-marque__b { font-family: var(--f-display); font-stretch: 78%; font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-deep); } .tb-nuit .tb-marque, .tb-pied .tb-marque { color: var(--on-night); } .tb-pied .tb-marque__b { color: var(--accent); } /* --------------------------------------------------------------------------- 11. EN-TÊTE Fond plein, pas de verre dépoli, un filet fin pour bord bas. ------------------------------------------------------------------------------ */ .tb-hdr { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); } .tb-hdr__bar { display: flex; align-items: center; justify-content: space-between; gap: 26px; height: 76px; } .tb-nav { display: flex; align-items: center; gap: 24px; } .tb-nav a { color: var(--ink-2); font-size: 14.5px; white-space: nowrap; transition: color var(--vite) ease; } .tb-nav a:hover { color: var(--accent-deep); } /* --------------------------------------------------------------------------- 12. QUESTIONS Ouverture par grid-template-rows : la réponse n'est jamais tronquée, quelle que soit sa longueur. ------------------------------------------------------------------------------ */ .tb-q { border-top: 1px solid var(--ink); } .tb-q__i { border-bottom: 1px solid var(--rule); transition: background .26s ease; } .tb-q__i--on { background: var(--paper); } .tb-band .tb-q__i--on { background: var(--paper); } .tb-q__r { display: grid; grid-template-columns: 1fr 18px; gap: 16px; align-items: baseline; width: 100%; padding: 20px 0; background: none; border: 0; text-align: left; cursor: pointer; } .tb-q__q { font-family: var(--f-display); font-weight: 600; font-size: 19.5px; line-height: 1.3; letter-spacing: -.018em; color: var(--ink-2); transition: color .26s ease; } .tb-q__c { justify-self: end; color: var(--ink-3); transition: transform .3s var(--ease); } .tb-q__i--on .tb-q__q { color: var(--ink); } .tb-q__i--on .tb-q__c { transform: rotate(180deg); } .tb-q__r:hover .tb-q__q { color: var(--ink); } .tb-q__w { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); } .tb-q__i--on .tb-q__w { grid-template-rows: 1fr; } .tb-q__w > div { overflow: hidden; } .tb-q__a { margin: 0; padding: 0 18px 24px 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 68ch; } /* --------------------------------------------------------------------------- 13. AVIS ET FICHE ------------------------------------------------------------------------------ */ /* Avis : une personne, une date, une note, un texte, une source. Le « G » n'est pas décoratif — il dit d'où vient l'avis, donc il porte ses vraies couleurs. Pas de liseré gradué ici : ce dispositif reste la marque des cartes de prestation et de public. */ .tb-avis { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: clamp(12px, 1.4vw, 18px); } .tb-avis__i { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.2vw, 27px); background: var(--paper); border: 1px solid var(--rule); } .tb-avis__h { display: flex; align-items: center; gap: 12px; } .tb-avis__av { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent-deep); color: var(--paper); font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1; } .tb-avis__m { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .tb-avis__n { font-size: 15px; font-weight: 600; line-height: 1.2; } .tb-avis__d { font-size: 13px; color: var(--ink-3); line-height: 1.2; } .tb-avis__t { margin: 0; flex: 1; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); } .tb-avis__src { display: flex; align-items: center; gap: 8px; padding-top: 13px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-3); } .tb-avis__src svg { width: 14px; height: 14px; flex-shrink: 0; } .tb-fiche { border-top: 1px solid var(--rule); } .tb-fiche__r { display: flex; justify-content: space-between; align-items: baseline; gap: 22px; padding: 13px 0; border-bottom: 1px solid var(--rule); } .tb-fiche__k { font-size: 14px; color: var(--ink-3); flex-shrink: 0; } .tb-fiche__v { font-size: 15px; text-align: right; line-height: 1.5; } .tb-drench .tb-fiche, .tb-drench .tb-fiche__r { border-color: rgba(246, 243, 237, .26); } .tb-drench .tb-fiche__k { color: rgba(246, 243, 237, .72); } .tb-etoiles { display: flex; gap: 3px; color: var(--accent); } /* Le sceau : la preuve qu'un syndic cherche en premier. Ce n'est pas une note de bas de bande, c'est un engagement. */ .tb-sceau { display: flex; align-items: center; gap: 15px; margin-top: clamp(28px, 3.2vw, 44px); padding: 17px 20px; background: var(--paper); border: 1px solid var(--rule); } .tb-sceau svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--accent); } .tb-sceau__t { margin: 0; font-size: 15.5px; line-height: 1.45; } .tb-sceau__t b { font-family: var(--f-display); font-weight: 600; } .tb-sceau__t span { color: var(--ink-3); } /* --------------------------------------------------------------------------- 13 bis. COMPOSITIONS Trames asymétriques : le contenu n'est jamais une pile centrée. ------------------------------------------------------------------------------ */ /* Rythme vertical : varié, jamais la même respiration partout. */ .tb-sec--court { padding-top: clamp(38px, 4.5vw, 64px); padding-bottom: clamp(38px, 4.5vw, 64px); } .tb-pile { display: grid; gap: clamp(18px, 2vw, 26px); justify-items: start; } .tb-pile--serre { gap: 13px; } .tb-pile--large { gap: clamp(26px, 3vw, 42px); } .tb-rang { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .tb-duo { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(30px, 4.5vw, 70px); align-items: end; } .tb-duo--h { align-items: start; } .tb-duo--r { grid-template-columns: 1fr 1.5fr; align-items: start; } .tb-duo--c { grid-template-columns: 1fr 1.15fr; align-items: start; } .tb-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; margin-bottom: clamp(22px, 2.8vw, 36px); } /* Colonne d'accompagnement : elle suit la lecture d'une longue liste plutôt que de laisser un grand vide sous elle. */ .tb-colle { position: sticky; top: 108px; align-self: start; } /* Les trois temps du chantier. */ .tb-etapes { display: grid; gap: 0; border-top: 1px solid var(--rule); } .tb-etapes__r { display: grid; grid-template-columns: 22px 1fr; gap: 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--rule); } /* Un panneau du logo tient lieu de rang : la suite se lit sans être numérotée. */ .tb-etapes__r::before { content: ''; width: 12px; height: 7px; background: var(--accent); transform: skewX(-18deg) translateY(-2px); } .tb-etapes__t { font-size: 16px; line-height: 1.5; color: var(--ink-2); } /* Galerie de relevés. */ .tb-galerie { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .tb-galerie > *:nth-child(1) { grid-column: span 4; } .tb-galerie > *:nth-child(2) { grid-column: span 2; } .tb-galerie > *:nth-child(3) { grid-column: span 2; } .tb-galerie > *:nth-child(4) { grid-column: span 2; } .tb-galerie > *:nth-child(5) { grid-column: span 2; } /* Avant / après : le curseur est une ligne de relevé qu'on déplace. */ .tb-ba { position: relative; overflow: hidden; } .tb-ba:focus-within { outline: 2px solid var(--accent-deep); outline-offset: 3px; } .tb-ba__c { position: absolute; inset: 0; } .tb-ba__h { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: translateX(-1px); pointer-events: none; z-index: 4; } .tb-ba__p { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 5; display: flex; align-items: center; justify-content: center; gap: 4px; width: 46px; height: 46px; background: var(--paper); border: 1px solid var(--accent); color: var(--ink); pointer-events: none; } .tb-ba__t { position: absolute; top: 12px; z-index: 4; padding: 6px 11px; background: var(--ink); color: var(--paper); pointer-events: none; } .tb-ba__i { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; appearance: none; -webkit-appearance: none; background: transparent; touch-action: pan-y; } /* Bouton secondaire : copier l'adresse. */ .tb-bouton { display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px; background: transparent; border: 1px solid currentColor; color: inherit; cursor: pointer; transition: background var(--vite) ease, color var(--vite) ease; } .tb-bouton:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .tb-bouton--fait { background: var(--paper); border-color: var(--paper); color: var(--accent-deep); } .tb-drench .tb-bouton--fait:hover { background: var(--paper); border-color: var(--paper); color: var(--accent-deep); } /* Lien de renvoi, souligné d'un filet fin. */ .tb-renvoi { display: inline-block; font-size: 15px; color: var(--ink-2); padding-bottom: 4px; background-image: linear-gradient(var(--rule-2), var(--rule-2)); background-size: 100% 1px; background-position: left bottom; background-repeat: no-repeat; transition: color var(--vite) ease; } .tb-renvoi:hover { color: var(--accent-deep); } /* --------------------------------------------------------------------------- 14. PIED DE PAGE ET BARRE D'APPEL ------------------------------------------------------------------------------ */ .tb-pied { background: var(--night); color: var(--on-night); } .tb-pied a { color: var(--on-night); transition: color var(--vite) ease; } .tb-pied a:hover { color: var(--accent); } .tb-pied__g { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); } .tb-pied__col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; } .tb-pied__bas { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--night-2); font-size: 13.5px; color: var(--on-night-2); } .tb-barre { display: none; } /* --------------------------------------------------------------------------- 15. LE BALAYAGE — la mécanique de mouvement Une seule mécanique, réutilisée partout : les blocs se composent depuis le bas, les filets se tracent depuis la gauche. Tout est piloté par la classe .tb-vu, posée par un IntersectionObserver. ------------------------------------------------------------------------------ */ /* Blocs : composition depuis le bas, sans animer de propriété de mise en page. */ [data-lever] { opacity: 0; transform: translateY(18px); transition: opacity var(--lent) var(--ease), transform var(--lent) var(--ease); transition-delay: calc(var(--i, 0) * 60ms); } [data-lever].tb-vu { opacity: 1; transform: none; } /* Les filets se tracent depuis la gauche. */ [data-lever] .tb-repere::after, [data-lever] .tb-cote__l { transform: scaleX(0); transition: transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 60ms + 120ms); } [data-lever].tb-vu .tb-repere::after, [data-lever].tb-vu .tb-cote__l { transform: scaleX(1); } /* Ouverture : le bloc-titre se compose ligne à ligne. */ .tb-ouvre > * { opacity: 0; transform: translateY(20px); animation: tb-monte .85s var(--ease) forwards; } .tb-ouvre > *:nth-child(1) { animation-delay: .10s; } .tb-ouvre > *:nth-child(2) { animation-delay: .19s; } .tb-ouvre > *:nth-child(3) { animation-delay: .28s; } .tb-ouvre > *:nth-child(4) { animation-delay: .37s; } .tb-ouvre > *:nth-child(5) { animation-delay: .46s; } @keyframes tb-monte { to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- 16. ADAPTATION ------------------------------------------------------------------------------ */ @media (max-width: 1000px) { .tb-nav { display: none; } .tb-pied__g { grid-template-columns: repeat(2, 1fr); } .tb-duo, .tb-duo--r, .tb-duo--c { grid-template-columns: 1fr; align-items: start; } .tb-colle { position: static; } .tb-galerie { grid-template-columns: repeat(4, 1fr); } .tb-galerie > *:nth-child(n) { grid-column: span 2; } } @media (max-width: 780px) { :root { --sec: clamp(48px, 9vw, 76px); } html { scroll-padding-top: 76px; } .tb-hdr__bar { height: 64px; gap: 14px; } .tb-q__r { grid-template-columns: 1fr 16px; gap: 12px; padding: 17px 0; } .tb-q__q { font-size: 17.5px; } .tb-q__a { padding: 0 0 20px 0; font-size: 16px; } .tb-cotes { gap: 24px 20px; } .tb-cote__v { font-size: clamp(28px, 8vw, 40px); } /* Les boutons d'appel prennent toute la largeur — sauf celui de l'en-tête, qui reste compact dans sa barre. */ .tb-appel:not(.tb-appel--menu) { width: 100%; justify-content: flex-start; } .tb-etapes__r { grid-template-columns: 18px 1fr; gap: 13px; } .tb-ba__p { width: 38px; height: 38px; } /* Galerie : carrousel tactile plein bord plutôt qu'une pile de grands blocs. */ .tb-galerie { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(-1 * max(var(--gout), env(safe-area-inset-left))); padding: 0 max(var(--gout), env(safe-area-inset-left)) 4px; gap: 10px; } .tb-galerie::-webkit-scrollbar { display: none; } .tb-galerie > * { flex: 0 0 78%; scroll-snap-align: center; } /* Barre d'appel fixe : le numéro reste à portée dès qu'on a quitté le héros. */ .tb-barre { display: flex; position: fixed; inset: auto 0 0 0; z-index: 60; align-items: center; justify-content: space-between; gap: 14px; padding: 11px max(16px, env(safe-area-inset-left)) calc(11px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right)); background: var(--accent-btn); color: var(--accent-on); box-shadow: 0 -8px 28px rgba(31, 21, 13, .2); visibility: hidden; transform: translateY(112%); transition: transform .34s var(--ease), visibility 0s linear .34s; } .tb-barre--on { visibility: visible; transform: translateY(0); transition: transform .34s var(--ease), visibility 0s; } .tb-barre__n { font-family: var(--f-display); font-weight: 600; font-size: 21px; line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; } .tb-barre__b { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--ink); color: var(--paper); flex-shrink: 0; } .tb-hdr--muet .tb-hdr__appel { display: none; } .tb-pied { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } } @media (max-width: 560px) { /* Quatorze métiers empilés font un défilement interminable. Sur petit écran la grille des travaux redevient un index : deux colonnes, icône et intitulé. Le détail reste sur les écrans qui ont la place. Les publics ne sont que cinq et leurs promesses comptent : ils gardent leur description. */ .tb-cartes--index { grid-template-columns: repeat(2, 1fr); gap: 10px; } .tb-cartes--index .tb-carte { padding: 15px 13px 17px; gap: 7px; } .tb-cartes--index .tb-carte__i { width: 25px; height: 25px; margin-bottom: 0; } .tb-cartes--index .tb-carte__t { font-size: 15.5px; line-height: 1.22; } .tb-cartes--index .tb-carte__d, .tb-cartes--index .tb-carte__a { display: none; } /* La carte ouverte garde sa voix et prend toute la largeur. */ .tb-cartes--index .tb-carte--ouverte { grid-column: 1 / -1; padding: 20px 18px; } .tb-cartes--index .tb-carte--ouverte .tb-carte__d { display: block; } .tb-cartes--index .tb-carte--ouverte .tb-carte__a { display: flex; } } @media (max-width: 520px) { .tb-pied__g { grid-template-columns: 1fr; } .tb-hdr__tag { display: none; } .tb-cadre__leg { font-size: 12.5px; } } @media (max-width: 360px) { .tb-marque__w { display: none; } .tb-barre__lbl { display: none; } } /* Cibles tactiles généreuses sur tout écran au doigt, pas seulement les petits. */ @media (pointer: coarse) { .tb-pied__col a, .tb-tel, .tb-renvoi { display: inline-block; min-height: 44px; padding-top: 12px; padding-bottom: 12px; margin-top: -9px; margin-bottom: -9px; } .tb-nav a { padding: 11px 0; } .tb-marque { min-height: 44px; } .tb-appel--menu { min-height: 44px; } .tb-pied__bas a { min-height: 44px; display: inline-flex; align-items: center; } } /* --------------------------------------------------------------------------- 17. MOUVEMENT RÉDUIT ET IMPRESSION ------------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; } [data-lever] { opacity: 1; transform: none; } [data-lever] .tb-repere::after, [data-lever] .tb-cote__l { transform: none; } .tb-ouvre > * { opacity: 1; transform: none; animation: none; } } @media print { .tb-barre, .tb-hdr { display: none; } [data-lever] { opacity: 1; transform: none; } .tb-nuit, .tb-drench { background: none; color: var(--ink); } }