/* ============================================================================ VERRE — la couche « liquid glass » du site public (2026-10-15) ⚠️⚠️ POURQUOI CETTE FEUILLE EXISTE. Refonte demandée par le client : « un design en liquid glass comme la toute dernière version d'iOS ». La charte d'origine posait des surfaces PLEINES et opaques (cartes ivoire, boutons or massif) et des titres en Anton, c'est-à-dire l'inverse d'Apple. ⚠️ ELLE EST CHARGÉE EN DERNIER, après `charte-publique.css` (pages du gabarit `n_base.html`) comme après les `no_scroll*.css` (pages `visibilite`, `leads`, `artisan`). Elle ne touche QUE des classes `n-` : elle ne peut pas salir les autres familles de gabarits. Les règles qui doivent gagner sur la charte portent `!important` — c'est assumé, et c'est la seule façon de repeindre 161 Ko de charte sans les réécrire. ⚠️ Ce qui fait le « verre » et pas « du blanc transparent » : 1. `backdrop-filter` (flou + saturation) : sans lui, un fond translucide n'est qu'un gris sale ; 2. une ARÊTE lumineuse (bordure blanche 1 px + liseré interne en haut) : c'est elle qui donne l'épaisseur du verre ; 3. une ombre large et basse, jamais un contour dur ; 4. un fond en dégradé (plus clair en haut) : la lumière vient d'en haut. ⚠️ Ne PAS revenir à des fonds opaques : les écrans restent transparents pour laisser passer la nuée animée (static/nuee3d.js), qui est ce que le verre réfracte. Un fond opaque tue les deux. ============================================================================ */ :root { /* --- le verre --- */ --v-flou: blur(26px) saturate(180%); --v-flou-fort: blur(40px) saturate(200%); --v-fond: linear-gradient(168deg, rgba(255, 254, 251, .88), rgba(255, 252, 244, .70)); --v-fond-creux: linear-gradient(168deg, rgba(255, 254, 251, .74), rgba(252, 248, 240, .56)); --v-fond-fort: linear-gradient(168deg, rgba(255, 254, 252, .96), rgba(255, 253, 247, .82)); --v-arete: rgba(255, 255, 255, .88); --v-arete-bas: rgba(120, 96, 50, .12); --v-lueur: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .45), inset 0 -22px 44px -34px rgba(74, 56, 26, .40); --v-ombre: 0 26px 54px -24px rgba(62, 45, 18, .40), 0 3px 10px rgba(62, 45, 18, .10); --v-ombre-haute: 0 14px 30px -16px rgba(62, 45, 18, .38), 0 1px 3px rgba(62, 45, 18, .08); --v-rayon: 24px; --v-rayon-petit: 16px; /* --- l'or, en verre teinté : même teinte, mais traversée par la lumière --- */ --v-or-verre: linear-gradient(168deg, #cfa153, #9c7a2c); /* ⚠️ Le fond de la barre a son propre jeton : plus opaque que les panneaux (le texte de navigation passe dessus à chaque défilement) mais pas plein — c'est encore du verre, on voit la page glisser dessous. */ --v-barre: rgba(250, 248, 243, .72); --v-barre-fort: rgba(250, 248, 243, .88); --v-or-verre-clair: linear-gradient(168deg, rgba(214, 178, 104, .92), rgba(170, 133, 60, .94)); /* --- la typographie : plus de display condensé, une grotesque serrée --- */ --v-police: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Archivo, system-ui, sans-serif; --v-police-titre: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Archivo, system-ui, sans-serif; } /* ⚠️⚠️ LE FOND D'ABORD (2026-10-15, deuxième passe). Première mesure en vrai : le verre était posé sur un ivoire plat, donc invisible — « tout est délavé ». Un verre sans rien derrière n'est pas du verre, c'est du blanc. On pose donc un fond MAILLÉ aux couleurs de la marque (or chaud en haut à gauche, ardoise froide en haut à droite, or profond en bas), comme les fonds d'iOS : c'est lui que les panneaux réfractent, et c'est lui qui donne l'épaisseur. */ html { background: radial-gradient(1200px 700px at 10% -12%, rgba(232, 200, 135, .62), transparent 62%), radial-gradient(900px 620px at 94% 4%, rgba(150, 168, 196, .30), transparent 64%), radial-gradient(1100px 800px at 72% 104%, rgba(186, 148, 74, .26), transparent 62%), linear-gradient(180deg, #f6f2ea, #f1ece2) !important; background-attachment: fixed; } /* ------------------------------------------------------- 0. LE FOND QUI SE RETIRE ⚠️⚠️ LE VERRE A BESOIN D'UN FOND CALME (2026-10-15). Mesure sur l'accueil : la nuée animée passe derrière le texte, et ses grandes cartes dorées rendaient la ligne de texte grise illisible par endroits. iOS ne pose jamais du verre sur une image sans l'avoir adoucie : on interpose un voile ivoire translucide ENTRE le décor (canvas, z-index -2) et le contenu. Le décor reste visible — il est ce que le verre réfracte — mais il ne se bat plus avec le texte. */ body.n-body::before, body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(247, 244, 238, .30), rgba(247, 244, 238, .44)); } /* ------------------------------------------------------------------ 1. LE TEXTE ⚠️ Anton est une display condensee, en capitales : deux raisons de la retirer ici. Le client demande du verre ; et une capitale condensee ne se marie avec aucune matière claire. On passe à une grotesque resserrée, comme iOS. */ html body.n-body, html body { font-family: var(--v-police) !important; -webkit-font-smoothing: antialiased; } h1, h2, h3, .n-title, .n-sub, .n-plan__titre, .n-plan__nom { font-family: var(--v-police-titre) !important; text-transform: none !important; letter-spacing: -.028em !important; } h1, .n-title { font-weight: 700 !important; line-height: 1.04 !important; } h2 { font-weight: 650 !important; line-height: 1.1 !important; } h3 { font-weight: 600 !important; letter-spacing: -.02em !important; } /* les intitulés de section : petites capitales espacées, en or, sans monospace */ .n-kicker, .n-car__kicker, .n-screen .kicker, .n-prix-unite, .n-car-label { font-family: var(--v-police) !important; font-size: .74rem !important; font-weight: 600 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--n-or) !important; } .n-sub { font-weight: 500 !important; color: var(--n-dim); } /* les prix gardent leur chasse fixe : un chiffre aligné se lit d'un coup d'œil */ .n-prix, .n-plan__prix { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ 2. LA BARRE ⚠️⚠️ LA PASTILLE FLOTTANTE A ÉTÉ ABANDONNÉE (2026-10-15, verdict du client : « la barre du haut est complètement à refaire, tout se chevauche, rien n'est clair »). Mesure de ce qui n'allait pas : sur téléphone, la marque finissait à 121 px et le bouton commençait à 121 px — ZÉRO pixel d'air entre les deux ; et une pastille à coins ronds qui flotte à 8 px des bords, ça n'est plus une barre de navigation, c'est un objet posé sur la page. Retour à ce que fait iOS 26 pour une barre de navigation : PLEINE LARGEUR, collée en haut, verre franc, un filet en bas. C'est plus lisible, ça ne laisse aucun doute sur ce qui est cliquable, et c'est ce qu'attend un pouce. ⚠️ Deux choses restent : la `position: fixed` (les écrans réservent sa hauteur) et l'écart minimal entre les éléments (`gap`), qui manquait justement. */ /* ⚠️⚠️ LA CAPSULE DÉTACHÉE — CE QU'ON GARDE ET CE QU'ON RÉPARE (2026-10-15, retour du client : « la part du haut était détachée comme une espèce de capsule, c'était très esthétique »). Elle revient. Mais la première version avait deux vices, et ils sont corrigés ici plutôt que rejoués : 1. elle ÉCRASAIT la marque (case de 72 px pour un mot de 98 → le texte passait sous le bouton). Réparé en amont : les boutons ont quitté la monospace capitales espacée de l'ancienne charte, et `flex: 0 0 auto` interdit désormais d'écraser la marque ; 2. elle s'étirait d'un bord à l'autre de l'écran, donc sur un grand écran c'était un long ruban, pas une capsule. Elle est maintenant LARGE DE 1240 px AU PLUS et centrée : le verre se lit comme un objet, avec la page qui passe derrière sur les côtés — c'est là que le `backdrop-filter` se voit vraiment. */ .n-head { position: fixed !important; top: 10px !important; left: 0 !important; right: 0 !important; width: min(1240px, calc(100% - 24px)) !important; max-width: none !important; margin: 0 auto !important; display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 18px !important; border-radius: 999px !important; background: var(--v-barre) !important; -webkit-backdrop-filter: var(--v-flou-fort) !important; backdrop-filter: var(--v-flou-fort) !important; border: 1px solid var(--v-arete) !important; box-shadow: var(--v-lueur), 0 18px 40px -22px rgba(62, 45, 18, .42) !important; } .n-head__cta { border-radius: 999px !important; background: var(--v-or-verre) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 20px -8px rgba(138, 106, 42, .7) !important; font-weight: 600 !important; letter-spacing: .01em !important; } .n-menu-btn { border-radius: 999px !important; background: var(--v-fond-creux) !important; -webkit-backdrop-filter: var(--v-flou) !important; backdrop-filter: var(--v-flou) !important; border: 1px solid var(--v-arete) !important; box-shadow: var(--v-lueur) !important; } /* le logo : la marque, puis le mot */ .n-logo { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-family: var(--v-police-titre) !important; font-size: 1.18rem !important; font-weight: 700 !important; letter-spacing: -.03em !important; text-transform: none !important; } .n-logo img { width: 31px; height: 31px; display: block; transform: translateY(-1px); } .n-logo b { font-weight: 700 !important; } /* ------------------------------------------------------------ 3. LE VERRE, PARTOUT Une seule recette, appliquée à toutes les surfaces bâties de la charte. */ .n-car-item, .n-car--prix, .n-car, .n-plan, .n-plan__liste, .n-detail, .n-ex, .n-fact, .n-verif__champ, .n-pastille, .n-villes li, .n-price__col, .n-tarif, .n-post, .n-avis, .n-offre, .n-carte { background: var(--v-fond) !important; -webkit-backdrop-filter: var(--v-flou) !important; backdrop-filter: var(--v-flou) !important; border: 1px solid var(--v-arete) !important; border-radius: var(--v-rayon) !important; box-shadow: var(--v-lueur), var(--v-ombre) !important; } .n-car-item, .n-plan, .n-plan__liste, .n-detail { padding: clamp(20px, 2.2vw, 30px) !important; } .n-detail--grid, .n-car--prix { overflow: hidden; } /* les petites puces : du verre plus fin, pour ne pas lutter avec les cartes */ .n-pastille, .n-villes li, .n-prix-unite, .n-tag { border-radius: 999px !important; padding: 7px 15px !important; font-size: .84rem !important; box-shadow: var(--v-lueur), var(--v-ombre-haute) !important; } .n-villes li { list-style: none; } .n-villes { gap: 9px !important; } /* ------------------------------------------------------------------- 4. LES BOUTONS Trois boutons, trois matières : or teinté (l'action), verre clair (l'action seconde), verre nu (le lien d'appoint). Tous des pastilles. */ .n-btn { border-radius: 999px !important; font-family: var(--v-police) !important; font-weight: 600 !important; letter-spacing: .005em !important; text-transform: none !important; font-size: .95rem !important; padding: 14px 26px !important; border: 1px solid var(--v-arete) !important; background: var(--v-fond-fort) !important; -webkit-backdrop-filter: var(--v-flou) !important; backdrop-filter: var(--v-flou) !important; color: var(--n-fg) !important; box-shadow: var(--v-lueur), var(--v-ombre-haute) !important; transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, filter .22s; } .n-btn:hover { transform: translateY(-2px); filter: brightness(1.04); } .n-btn:active { transform: translateY(0) scale(.985); } .n-btn--or, .n-btn.primary, .n-btn--plein { background: var(--v-or-verre) !important; color: #fff !important; border-color: rgba(255, 255, 255, .45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 30px -12px rgba(138, 106, 42, .75) !important; } .n-btn-ghost, .n-btn--vide { background: rgba(255, 255, 255, .34) !important; border-color: var(--v-arete) !important; } /* le numéro de téléphone de la barre : discret, jamais criard */ .n-tel, .n-head .n-tel { border-radius: 999px !important; font-family: var(--v-police) !important; font-weight: 600 !important; font-size: .92rem !important; letter-spacing: 0 !important; } /* --------------------------------------------------------------- 5. LES ÉCRANS ⚠️ Les écrans restent transparents : c'est la nuée animée qu'on voit au travers du verre. On ne pose donc AUCUN fond ici — seulement la respiration. */ .n-screen { padding-block: clamp(56px, 7vw, 104px) !important; } .n-screen--serre { padding-block: clamp(36px, 4vw, 60px) !important; } .n-screen h1, .n-screen h2 { text-wrap: balance; } /* ⚠️⚠️ DEUX BUGS MESURÉS, CORRIGÉS ICI (2026-10-15, troisième passe). 1. LE PREMIER TITRE PASSAIT SOUS LA BARRE. La barre flottante s'arrête à 74 px ; sur `/resultats`, `/devis/plombier` et `/cgv`, le premier texte commençait à 51, 52 et 70 px — donc DERRIÈRE le verre. Trois pages avaient le défaut, toutes les autres non (mesuré page par page). On impose donc une garde uniforme de 88 px au premier écran de chaque page : le contenu ne touche plus jamais la barre, et toutes les pages commencent à la même hauteur — c'est exactement ce que fait la « safe area » d'iOS. */ main > .n-screen:first-child, main > .n-lecture, .n-body > .n-screen:first-of-type { padding-top: clamp(88px, 5.5vw, 104px) !important; } /* 2. DU TEXTE TROP PETIT. Relevé sur tout le site : 9,92 px (notes de l'accueil), 10,24 (en-têtes de tableaux de prix), 10,5 (étiquettes de formulaire), 10,56 (badges, « ouvrir l'exemple »), 11,2-11,84 (kickers, colonnes de pied de page). Sous 12,5 px, un texte ne se lit plus en plein soleil, et iOS ne descend jamais sous 11 pt. Plancher unique : plus rien en dessous de 12,5 px. */ .n-kicker, .n-car-label, .n-car__kicker, .n-prix-unite, .n-menu-group, .n-pay__badge, .n-ex__ouvrir, .n-plan__nom, .n-tag, label, dt, .np__titre, .tn-prog-tete, small, .n-lecture small, figcaption { font-size: 12.5px !important; } .n-prix-unite, .n-plan__note, .notephoto, .credits { line-height: 1.5 !important; } /* ----------------------------------------------------------------- 6. LES CHAMPS Un champ iOS : creux, translucide, arête discrète, halo doré au focus. */ .n-verif__champ, input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select { background: var(--v-fond-creux) !important; -webkit-backdrop-filter: var(--v-flou) !important; backdrop-filter: var(--v-flou) !important; border: 1px solid var(--v-arete-bas) !important; border-radius: 14px !important; box-shadow: inset 0 1px 2px rgba(74, 56, 26, .07) !important; font-family: var(--v-police) !important; font-size: 1rem !important; padding: 14px 16px !important; color: var(--n-fg) !important; } input:focus, textarea:focus, select:focus { outline: none !important; border-color: rgba(176, 138, 62, .55) !important; box-shadow: 0 0 0 4px rgba(176, 138, 62, .16), inset 0 1px 2px rgba(74, 56, 26, .06) !important; } /* ------------------------------------------------------------------ 7. LE MENU Plein écran : une feuille de verre épaisse, jamais un aplat noir. */ .n-menu { -webkit-backdrop-filter: var(--v-flou-fort) !important; backdrop-filter: var(--v-flou-fort) !important; background: linear-gradient(168deg, rgba(247, 244, 238, .90), rgba(247, 244, 238, .78)) !important; } .n-menu .n-link { font-family: var(--v-police-titre) !important; font-weight: 600 !important; letter-spacing: -.02em !important; text-transform: none !important; border-radius: 16px !important; padding: 12px 16px !important; } .n-menu .n-link:hover { background: var(--v-fond-fort); box-shadow: var(--v-lueur); } .n-menu-group { font-family: var(--v-police) !important; font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--n-or) !important; } /* --------------------------------------------------------------- 8. LE PIED DE PAGE Une bande de verre, séparée par une arête et non par un trait noir. */ .n-pied, .n-foot, footer.n-pied { background: linear-gradient(180deg, rgba(255, 253, 249, .0), rgba(255, 253, 249, .55)) !important; -webkit-backdrop-filter: var(--v-flou) !important; backdrop-filter: var(--v-flou) !important; border-top: 1px solid var(--v-arete) !important; } /* -------------------------------------------------- 9. LA VIE : survols et arrivées */ .n-car-item, .n-plan, .n-ex, .n-detail, .n-post, .n-avis { transition: transform .26s cubic-bezier(.2, .8, .2, 1), box-shadow .26s; } .n-car-item:hover, .n-plan:hover, .n-ex:hover, .n-post:hover { transform: translateY(-3px); box-shadow: var(--v-lueur), 0 26px 52px -22px rgba(74, 56, 26, .38) !important; } @media (prefers-reduced-motion: no-preference) { .n-screen > * { animation: verre-arrive .7s cubic-bezier(.2, .8, .2, 1) both; } @keyframes verre-arrive { from { opacity: 0; transform: translateY(14px) scale(.994); } to { opacity: 1; transform: none; } } } /* ------------------------------------------------------------------- 10. TÉLÉPHONE ⚠️ Le verre coûte cher : sous 700 px on réduit le flou (mesuré : 40 px de flou sur 390 px de large, c'est du saccage de batterie pour rien). */ @media (max-width: 760px) { :root { --v-flou: blur(16px) saturate(170%); --v-flou-fort: blur(20px) saturate(180%); --v-rayon: 20px; } /* ⚠️ Mesure du 2026-10-15 : à 390 px, la marque finissait à 121 px et le bouton commençait à 121 px. Un `gap` de 10 px et un bouton plus court, et la barre respire enfin (marque 92 + bouton 112 + menu 74 + 2 écarts = 300 px sur 358). */ .n-head { top: 8px !important; left: 0 !important; right: 0 !important; width: calc(100% - 16px) !important; padding: 8px 12px !important; gap: 9px !important; } .n-logo { font-size: 1.04rem !important; gap: 8px !important; } .n-logo img { width: 26px; height: 26px; } .n-head__cta { padding: 10px 16px !important; font-size: .9rem !important; } .n-menu-btn { padding: 9px 13px !important; } .n-btn { padding: 13px 20px !important; font-size: .92rem !important; } .n-screen { padding-block: clamp(38px, 9vw, 60px) !important; } main > .n-screen:first-child, main > .n-lecture, .n-body > .n-screen:first-of-type { padding-top: 80px !important; } } @media (prefers-reduced-transparency: reduce) { :root { --v-fond: linear-gradient(168deg, #fffdf9, #fdfaf3); --v-fond-creux: #fffdf9; --v-fond-fort: #fffdf9; } .n-head, .n-menu, .n-car-item, .n-plan, .n-detail, .n-ex, .n-btn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* ============================================================================ QUATRIÈME PASSE — CE QUI FAIT « iOS 26 » ET PAS SEULEMENT « du verre » Trois choses manquaient, et ce sont celles qui trahissent une interface qui singe Apple sans l'avoir regardée : 1. la MATIÈRE SOMBRE. iOS vit en clair ET en sombre ; un site qui n'a que sa version claire a l'air d'un site, pas d'un système. On retourne donc les jetons de la charte elle-même (`--pi-*`) : tout le site suit, sans une seule règle de plus. 2. les CONTRÔLES. Un segment de choix iOS, c'est une capsule creuse avec une pastille blanche qui glisse ; un fait divers, c'est une liste groupée à filets rentrés. La charte n'avait ni l'un ni l'autre. 3. les RAYONS CONCENTRIQUES. Sur iOS, le rayon intérieur vaut le rayon extérieur MOINS la marge. Un 28 px extérieur demande un 18 px intérieur, sinon les angles se croisent et l'œil voit l'erreur sans savoir la nommer. ============================================================================ */ /* --- 1. LES RAYONS CONCENTRIQUES ------------------------------------------- */ :root { --v-rayon: 28px; --v-rayon-petit: 18px; } .n-car-item, .n-plan, .n-detail, .n-ex, .n-post { border-radius: 28px !important; } .n-car-item img, .n-ex__visuel, .n-post img { border-radius: 18px !important; } .n-verif__champ, input, textarea, select { border-radius: 16px !important; } /* --- 2a. LE SEGMENT DE CHOIX (pastilles) ---------------------------------- */ .n-pastilles { display: inline-flex !important; gap: 4px !important; padding: 4px !important; border-radius: 999px !important; background: var(--v-fond-creux) !important; -webkit-backdrop-filter: var(--v-flou) !important; backdrop-filter: var(--v-flou) !important; border: 1px solid var(--v-arete) !important; box-shadow: inset 0 1px 2px rgba(74, 56, 26, .10), var(--v-ombre-haute) !important; } .n-pastille { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 10px 18px !important; font-weight: 600 !important; font-size: .86rem !important; transition: background .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s, transform .18s; } .n-pastille[aria-current="true"] { background: #fff !important; box-shadow: 0 3px 8px rgba(74, 56, 26, .18), 0 1px 1px rgba(74, 56, 26, .08) !important; } .n-pastille:active { transform: scale(.97); } /* --- 2b. LA LISTE GROUPÉE (les faits, les chiffres clés) ------------------ */ .n-facts, .n-kpi { display: block !important; background: var(--v-fond) !important; -webkit-backdrop-filter: var(--v-flou) !important; backdrop-filter: var(--v-flou) !important; border: 1px solid var(--v-arete) !important; border-radius: 22px !important; box-shadow: var(--v-lueur), var(--v-ombre) !important; overflow: hidden !important; padding: 0 !important; margin: 34px 0 0 !important; } .n-facts > div, .n-kpi > div { display: flex !important; justify-content: space-between !important; align-items: baseline !important; gap: 18px !important; padding: 18px 26px !important; margin: 0 !important; border-bottom: 1px solid rgba(120, 96, 50, .10) !important; } .n-facts > div:last-child, .n-kpi > div:last-child { border-bottom: 0 !important; } .n-facts dt, .n-kpi dt { color: var(--n-dim) !important; font-size: .95rem !important; } .n-facts dd, .n-kpi dd { margin: 0 !important; font-weight: 650 !important; letter-spacing: -.01em; } /* --- 3. LA BARRE SE RESSERRE QUAND ON DÉFILE ------------------------------ */ /* L'état « on a quitté le haut de page » : une ombre qui détache la barre du contenu, et deux pixels de moins en hauteur. Rien de plus — une barre qui change de forme sous le doigt, c'est exactement ce que le client a rejeté. */ .n-head { transition: padding .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s; } .n-head--defile { padding-top: 8px !important; padding-bottom: 8px !important; background: var(--v-barre-fort) !important; box-shadow: var(--v-lueur), 0 22px 46px -22px rgba(62, 45, 18, .55) !important; } .n-head__cta, .n-menu-btn, .n-tel { transition: padding .25s cubic-bezier(.2, .8, .2, 1), transform .2s; } /* --- 4. LE MODE SOMBRE (iOS vit des deux côtés) --------------------------- */ @media (prefers-color-scheme: dark) { html { color-scheme: dark; } /* ⚠️ On retourne les jetons de la CHARTE : le site entier suit (fonds, textes, filets, or), sans réécrire une seule règle de mise en page. L'or s'éclaircit et se désature un peu : sur fond noir, l'or profond devient illisible. */ :root { --pi-papier: #131211; --pi-papier-2: #1a1817; --pi-carte: #201d1a; --pi-encre: #f3eee2; --pi-encre-doux: #a89e8c; --pi-or: #d7b26a; --pi-or-clair: #f0d9a6; --pi-or-profond: #e3c07c; --pi-ligne: rgba(255, 255, 255, .12); --pi-ligne-forte: rgba(255, 255, 255, .20); --pi-ligne-or: rgba(215, 178, 106, .32); --v-fond: linear-gradient(168deg, rgba(48, 45, 40, .74), rgba(32, 30, 27, .60)); --v-fond-creux: linear-gradient(168deg, rgba(46, 43, 39, .64), rgba(30, 28, 25, .50)); --v-fond-fort: linear-gradient(168deg, rgba(58, 54, 48, .88), rgba(40, 37, 33, .74)); --v-arete: rgba(255, 255, 255, .17); --v-arete-bas: rgba(255, 255, 255, .09); --v-lueur: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .05), inset 0 -24px 44px -34px rgba(0, 0, 0, .55); --v-ombre: 0 26px 54px -24px rgba(0, 0, 0, .75), 0 3px 10px rgba(0, 0, 0, .40); --v-ombre-haute: 0 14px 30px -16px rgba(0, 0, 0, .70), 0 1px 3px rgba(0, 0, 0, .35); } html { background: radial-gradient(1200px 700px at 8% -14%, rgba(120, 92, 40, .40), transparent 62%), radial-gradient(900px 620px at 96% 2%, rgba(58, 74, 96, .34), transparent 64%), linear-gradient(180deg, #171614, #0e0d0c) !important; } /* la nuée est claire : on l'assombrit pour qu'elle reste un décor, pas un phare */ body.n-body::before, body::before { background: linear-gradient(180deg, rgba(16, 15, 14, .74), rgba(16, 15, 14, .88)); } .n-pastille[aria-current="true"] { background: rgba(255, 255, 255, .92) !important; color: #1a1817 !important; } .n-car-item, .n-plan, .n-detail, .n-ex, .n-post, .n-facts, .n-kpi { border-color: rgba(255, 255, 255, .14) !important; } .n-facts > div, .n-kpi > div { border-bottom-color: rgba(255, 255, 255, .10) !important; } /* les vignettes des exemples sont des captures d'écran CLAIRES : sous du verre sombre elles éblouissent si on ne les adoucit pas un peu */ .n-ex__visuel img, .n-car-item img { filter: brightness(.94) saturate(.98); } } /* --- 5. LES DERNIERS TEXTES TROP PETITS (relevés un par un, quatrième passe) ---- Ils étaient TOUS dans des choses qu'on touche : le bouton principal de la barre à 10,24 px, le bouton Menu à 12, les titres de rubriques du menu à 11,52, ses liens de pied à 11, les notes d'offre à 11,84, les badges à 9,6. Sur un iPhone, l'action la plus importante de l'écran ne fait jamais 10 px. */ .n-head__cta { font-size: .95rem !important; font-weight: 600 !important; padding: 11px 22px !important; letter-spacing: .005em !important; } .n-menu-btn, .n-menu-btn span, .n-menu-btn .n-burger + span { font-size: .93rem !important; } .n-menu-group { font-size: 12.5px !important; letter-spacing: .16em !important; } .n-menu-foot a { font-size: .93rem !important; } .n-plan__badge, .n-plan__nom { font-size: 12.5px !important; } .n-plan__note, .n-plans-label, .n-preuves__tete, .n-verif__bas, .n-pay__tiny, summary, .n-lecture h4, h4 { font-size: 13px !important; } .n-lecture summary { padding: 16px 0 !important; } /* --- 6. LA LIGNE « PAS DE BLABLA » PERD SA CHASSE FIXE -------------------------- Elle était en monospace (IBM Plex Mono). La chasse fixe a un rôle sur ce site — aligner des chiffres dans un tableau de prix — mais pas dans une phrase. En grotesque resserrée, elle se lit comme une phrase, pas comme du code. */ .n-dit { font-family: var(--v-police) !important; font-size: 1rem !important; letter-spacing: -.005em !important; color: var(--n-dim) !important; } .n-dit b { font-weight: 650 !important; } /* --- 7. EN SOMBRE, LA BARRE AVAIT BESOIN D'UN PEU PLUS D'ARÊTE ------------------ Mesure : sur fond noir, une arête à 17 % de blanc disparaît. On la monte et on ajoute un liseré supérieur : c'est la seule chose qui dit encore « verre ». */ @media (prefers-color-scheme: dark) { /* ⚠️ En sombre, les boutons secondaires redevenaient des pastilles BLANCHES : la charte pose un fond clair sur un sélecteur plus précis que le mien. On repasse devant — sinon le mode sombre ressemble à un thème clair mal réglé. */ .n-body .n-btn { background: var(--v-fond-fort) !important; color: var(--pi-encre) !important; } .n-body .n-btn--or, .n-body .n-btn--plein, .n-body .n-head__cta { background: var(--v-or-verre) !important; color: #fff !important; } .n-body .n-btn:hover { background: rgba(255, 255, 255, .10) !important; } .n-head { border-color: rgba(255, 255, 255, .18) !important; } :root { --v-barre: rgba(26, 25, 23, .70); --v-barre-fort: rgba(26, 25, 23, .86); } .n-head__cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 24px -10px rgba(0, 0, 0, .8) !important; } .n-menu-btn { background: rgba(255, 255, 255, .08) !important; } .n-btn--vide, .n-btn-ghost { background: rgba(255, 255, 255, .07) !important; } } /* --- 8. LES GROUPES DE BOUTONS QUI SE TOUCHAIENT --------------------------------- ⚠️⚠️ Bug d'affichage réel, mesuré : `.n-cta` est une GRILLE AVEC `gap: 0`. Ça tenait tant que les boutons étaient des rectangles à angles droits séparés par une bordure. Depuis qu'ils sont des pastilles de verre, deux pastilles collées, ça ne ressemble plus à des boutons mais à un bloc biscornu, avec des coins qui se croisent. Relevé sur /services, /prix, /pricing (2 ou 4 boutons). On rétablit une gouttière, et on retire les bordures qui servaient de séparateurs — chaque bouton porte maintenant sa propre arête. */ /* ⚠️ `.n-cta` TOUT SEUL NE SUFFISAIT PAS : la charte pose `column-gap: 0` et `row-gap: 0` sur `.n-screen--prix .n-cta` — même spécificité que `.n-cta`, mais plus spécifique que lui. Le préfixe `.n-body` (0,2,0) repasse devant, et la feuille étant chargée en dernier, l'égalité tourne en notre faveur. */ .n-body .n-cta { column-gap: 12px !important; row-gap: 12px !important; gap: 12px !important; } .n-body .n-cta .n-btn { border-right: 0 !important; border-bottom: 0 !important; width: 100%; } .n-body .n-cta::before, .n-body .n-cta::after { display: none !important; } @media (max-width: 760px) { .n-body .n-cta { grid-template-columns: 1fr !important; column-gap: 10px !important; row-gap: 10px !important; } } /* --- 9. LES TROIS DERNIERS PETITS (relevés un par un) --------------------------- Les étiquettes du formulaire d'accueil (« Votre métier », « Votre département ») étaient à 9,92 px : c'est le premier formulaire que voit un visiteur, et ses étiquettes étaient les plus petites du site. Les libellés des cartes d'exemple à 11,2, le lien « Voir tous les exemples » à 11,84, et le bouton du formulaire de la page d'atterrissage à 12 — qui ne dépend pas de la même famille de gabarits. */ .n-verif__champ > span, .n-verif label span, .n-preuve__corps b, .n-preuves__plus, .lead-form .btn, .lead-form button, .btn.primary, .n-preuves__tete { font-size: 12.5px !important; } .n-preuve__corps b { font-weight: 650 !important; } /* --- 10. LE DERNIER (page /artisan, famille de gabarits autonome) --------------- */ .tn-recap-t, .tn-recap span, .tn-prog-tete, .tn-etape b { font-size: 12.5px !important; } /* ============================================================================ LES CARROUSELS — « le carrousel de présentation est à revoir » (2026-10-15) ⚠️⚠️ CE QUI N'ALLAIT PAS. Sur grand écran, les listes de cartes étaient des RAILS HORIZONTAUX : mesuré sur /blog, une carte finissait à 2081 px pour un écran de 1400 — c'est-à-dire qu'on ne voyait jamais la fin de la liste, et qu'il fallait deviner qu'elle défilait. Pire sur /pricing : le rail des offres ne défile même pas sur grand écran (il est en grille, `overflow: hidden`), donc les points et la flèche « offre suivante » ne faisaient RIEN — des commandes mortes. Un carrousel qui décide seul de ce qu'on a le droit de voir, pour trois offres qu'on veut comparer, c'est exactement l'inverse de ce qu'il faut faire. ⚠️ LA RÈGLE. Ce qu'on veut comparer se voit en entier (grille) ; ce qui est une longue liste de choses semblables garde un rail, mais un rail HONNÊTE : qui s'aligne sur la carte, laisse voir la suivante, et cache sa barre de défilement. | | grand écran | téléphone | |------------------------|----------------------|-------------------------| | offres (/pricing) | 3 colonnes (déjà) | empilées, 1 colonne | | prestations, prix, blog| grille auto | rail aligné, cartes 84 %| ============================================================================ */ .n-car-item { border-right: 0 !important; border-left: 0 !important; } @media (min-width: 1025px) { .n-car, .n-car--prix { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)) !important; gap: 18px !important; overflow: visible !important; padding: 0 !important; margin-inline: 0 !important; scroll-snap-type: none !important; } .n-car > *, .n-car-item { flex: none !important; width: auto !important; min-width: 0 !important; } .n-plans { overflow: visible !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* les commandes du carrousel des offres ne servaient à rien : on les retire */ .n-pastilles, .n-fleche { display: none !important; } } @media (max-width: 1024px) { /* les trois offres s'empilent : on les compare en descendant la page, et plus aucune n'est cachée derrière une flèche */ .n-plans { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; overflow: visible !important; } .n-pastilles, .n-fleche { display: none !important; } /* les longues listes : un rail qui s'aligne, sans barre de défilement, cartes à 84 % pour que la suivante dépasse — c'est ce qui dit « ça défile » */ .n-car, .n-car--prix { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; scroll-padding-left: 18px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px !important; padding: 4px 18px 10px !important; margin-inline: -18px !important; } .n-car::-webkit-scrollbar, .n-car--prix::-webkit-scrollbar { display: none; } .n-car > *, .n-car-item, .n-car--prix > * { scroll-snap-align: start !important; flex: 0 0 84% !important; min-width: 0 !important; width: auto !important; } } /* --- 11. LA BARRE SUR TÉLÉPHONE : LA CAUSE DU CHEVAUCHEMENT --------------------- ⚠️⚠️ Diagnostic mesuré (2026-10-15, 390 px). Les trois éléments ne se chevauchaient pas : ils étaient TROP LARGES et le flex ÉCRASAIT la marque. Intrinsèque : marque ≈ 100 px + bouton 156 + menu 110 + écarts 20 + marges 28 = 414 px pour un écran de 390. Le seul élément compressible était la marque : sa case tombait à 72 px, son texte débordait de 28 px, et il passait SOUS le bouton doré (« devisa|ÊTRE RAPPELÉ »). D'où venaient les 156 et 110 px ? De la typographie de l'ancienne charte sur ces deux boutons : MONOSPACE, CAPITALES, et 2,98 px d'interlettrage. C'est un style de ruban de machine à écrire, pas de barre de navigation. En grotesque du système, casse normale, sans interlettrage : le bouton passe à ~118 px et le menu à ~84 — il reste 40 px de mou, plus rien n'est écrasé. */ .n-head__cta, .n-menu-btn { font-family: var(--v-police) !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap !important; } @media (max-width: 760px) { .n-head__cta { font-size: .88rem !important; padding: 10px 15px !important; font-weight: 600 !important; } .n-menu-btn { font-size: .86rem !important; padding: 9px 12px !important; gap: 7px !important; } .n-menu-btn .n-burger { transform: scale(.92); } /* la marque ne se laisse plus écraser : son texte ne peut plus passer dessous */ .n-logo { flex: 0 0 auto !important; } .n-logo b { white-space: nowrap !important; } } .n-logo { flex: 0 0 auto !important; } .n-logo b { white-space: nowrap !important; } /* --- 12. LES ÉTIQUETTES QUI PARLAIENT D'UN CARROUSEL DISPARU --------------------- ⚠️ « 3 offres — faites glisser », « 4 prestations — faites défiler », « 6 exemples à ouvrir — faites glisser » : ces consignes décrivaient un geste. Le geste n'existe plus sur grand écran (les cartes sont en grille) et n'existe plus du tout pour les offres. Garder la consigne, c'est promettre une interaction qui ne répond pas — exactement ce qui fait dire « rien n'est clair ». */ @media (min-width: 1025px) { .n-car-label, .n-preuves__tete, .n-plans-label { display: none !important; } } @media (max-width: 1024px) { .n-plans-label { display: none !important; } } /* ============================================================================ LE VERRE, PARTOUT — MÊME MATIÈRE SUR TOUTES LES PAGES (2026-10-15) ⚠️⚠️ CE QUI RESTAIT OPAQUE. Relevé automatique sur quatorze pages publiques : `backgroundColor` pleinement opaque ET `backdrop-filter: none`. Six familles de surfaces étaient restées en peinture mate au milieu d'un site de verre — et c'est exactement ce qui fait qu'une refonte a l'air « par endroits » : | surface | où | |------------------------------------------|-----------------------------| | `rgb(255,253,249)` — cartes d'exemple | accueil | | `rgb(255,253,249)` — carte du formulaire | accueil (342 × 513) | | `rgb(255,253,249)` — panneau de l'offre | /visibilite (342 × 800) | | `rgb(255,253,249)` — avantages | /leads | | `rgb(255,253,249)` — questions fréquentes | `details`, sur 4 pages | | `rgb(255,255,255)` — pastilles de choix | /artisan (une page entière) | ⚠️ UNE SEULE RECETTE, LES MÊMES JETONS. C'est la règle qui rend l'ensemble cohérent : toute surface se construit avec `--v-fond`, `--v-flou`, `--v-arete`, `--v-lueur`, `--v-ombre-haute`. Si une surface a sa propre couleur, elle jure. Le seul élément volontairement NON transparent est le pied de page (encre pleine) : un pied de page n'est pas un panneau, c'est un socle. ============================================================================ */ .n-preuve, .n-rappel__form, .n-pay, .lead-benefit, details.n-lecture, details { background: var(--v-fond) !important; -webkit-backdrop-filter: var(--v-flou) !important; backdrop-filter: var(--v-flou) !important; border: 1px solid var(--v-arete) !important; box-shadow: var(--v-lueur), var(--v-ombre-haute) !important; border-radius: 20px !important; } .n-pay, .n-rappel__form { border-radius: 24px !important; } /* les questions fréquentes : la carte s'ouvre en gardant sa matière */ details { overflow: hidden !important; padding: 0 !important; margin-bottom: 10px !important; } details > summary { padding: 17px 22px !important; border-radius: 20px !important; font-weight: 600 !important; cursor: pointer; } details[open] > summary { border-bottom: 1px solid rgba(120, 96, 50, .12) !important; } details > p, details > div { padding: 16px 22px 20px !important; margin: 0 !important; } details[open] { background: var(--v-fond-fort) !important; } /* l'intérieur de ces panneaux ne doit plus poser sa propre peinture : c'est le verre du parent qu'on doit voir au travers */ .n-pay table, .n-pay tr, .n-pay td, .n-pay th, .n-pay tbody, .n-pay thead, .lead-benefit > *, .n-rappel__form fieldset, .n-rappel__form legend { background-color: transparent !important; background-image: none !important; } .n-pay tr, .n-pay td, .n-pay th { border-color: rgba(120, 96, 50, .12) !important; } /* les champs des pages autonomes (famille « no scroll ») : mêmes champs que l'accueil */ .n-pay input:not([type="checkbox"]), .n-pay textarea, .n-pay select, .lead-form input:not([type="checkbox"]), .lead-form textarea, .lead-form select { background: var(--v-fond-creux) !important; -webkit-backdrop-filter: var(--v-flou) !important; backdrop-filter: var(--v-flou) !important; border: 1px solid var(--v-arete) !important; box-shadow: inset 0 1px 2px rgba(74, 56, 26, .06) !important; border-radius: 16px !important; } /* les pastilles de choix de la page artisan : une page entière de plaques blanches */ .tn-chip { background: var(--v-fond-creux) !important; -webkit-backdrop-filter: var(--v-flou) !important; backdrop-filter: var(--v-flou) !important; border: 1px solid var(--v-arete) !important; box-shadow: var(--v-lueur), 0 8px 18px -14px rgba(62, 45, 18, .4) !important; border-radius: 18px !important; transition: background .22s, box-shadow .22s, transform .16s; } .tn-chip:hover { box-shadow: var(--v-lueur), 0 12px 24px -14px rgba(62, 45, 18, .5) !important; transform: translateY(-1px); } .tn-chip:active { transform: scale(.985); } /* l'état choisi garde l'or : c'est le seul endroit où la couleur porte un sens */ .tn-chip[aria-pressed="true"], .tn-chip.actif, .tn-chip.on { background: var(--v-or-verre) !important; color: #fff !important; border-color: transparent !important; } @media (prefers-color-scheme: dark) { .tn-chip[aria-pressed="true"], .tn-chip.actif, .tn-chip.on { color: #1a1817 !important; } } /* --- 13. LE MODE LECTURE : UNE FEUILLE DE VERRE, PAS DU TEXTE EN L'AIR ----------- ⚠️ Dernière page qui jurait. Les pages légales et les articles de blog posaient leur texte directement sur le décor : lisible, mais c'était la seule famille de pages sans aucune matière, donc l'impression d'un site arrêté à mi-chemin. Une seule feuille de verre pour tout le mode lecture (`/cgv`, `/confidentialite`, `/mentions-legales`, les articles), et elles rentrent dans le rang. ⚠️ Elle commence SOUS la capsule (marge de 96 px pour une capsule qui s'arrête à 81) : sinon ses angles arrondis disparaîtraient dessous. ⚠️ Le sélecteur garde la forme `main > .n-lecture` : c'est celle de la garde posée plus haut, et à spécificité égale, la règle écrite en dernier gagne. */ main > .n-lecture { background: var(--v-fond) !important; -webkit-backdrop-filter: var(--v-flou) !important; backdrop-filter: var(--v-flou) !important; border: 1px solid var(--v-arete) !important; box-shadow: var(--v-lueur), var(--v-ombre) !important; border-radius: 28px !important; /* ⚠️ La feuille s'ajuste à la MESURE DE LECTURE, pas à la fenêtre : mesuré, la colonne de texte fait 710 px (`max-width: 709.8px` posé par la charte) — une feuille large de 1425 px laissait donc une moitié droite vide, ce qui a l'air d'un panneau oublié. 840 px = 710 + 2 × 64 de marge intérieure. */ max-width: 840px !important; margin: 96px auto 64px !important; padding: clamp(30px, 3.4vw, 52px) clamp(24px, 4.5vw, 64px) clamp(34px, 3.8vw, 60px) !important; } @media (max-width: 760px) { main > .n-lecture { margin: 84px 12px 44px !important; padding: 26px 20px 30px !important; border-radius: 24px !important; } } /* la table des matières de ces pages est un contrôle : elle prend la même matière que les autres listes groupées */ .n-lecture__tete { border-bottom: 1px solid rgba(120, 96, 50, .12) !important; padding-bottom: 18px !important; margin-bottom: 6px !important; } .n-lecture__tete a { text-decoration: none !important; } /* --- 14. LE MODE SOMBRE DES PAGES HORS CHARTE PUBLIQUE --------------------------- ⚠️⚠️ POURQUOI LA PAGE /visibilite ÉTAIT ILLISIBLE EN SOMBRE (2026-10-15). Elle n'utilise pas les jetons de la charte publique mais ceux de la vieille charte « classique » (115 jetons, dont `--ink: #0a0a0a` — du noir). Mesuré en mode sombre : `body → rgb(10,10,10)`, `h1 → rgb(10,10,10)`, `h3 → rgb(243,238,226)`. Autrement dit un titre noir sur fond noir, à côté d'un titre ivoire : la page était à moitié retournée. /leads et /artisan ont le même jeu. ⚠️ On retourne donc AUSSI ces jetons-là. Deux précautions : 1. cette vieille charte avait mis `--gold`, `--gold-2`, `--gold-3`, `--or-vif`, `--or-texte` à `#0a0a0a` — l'or y est volontairement du NOIR (une charte monochrome). En mode sombre, du noir devient de l'ivoire, pas de l'or : la couleur ne doit pas réapparaître là où le dessin l'avait retirée ; 2. `--or`, `--n-or`, `--v-or`, `--pi-or`… sont de VRAIS ors : eux s'éclaircissent sans changer de nature. ============================================================================ */ @media (prefers-color-scheme: dark) { :root { /* surfaces */ --paper: #131211; --paper-2: #1a1817; --card: #201d1a; --card-2: #262320; --blanc: #201d1a; --blanc-2: #262320; --blanc-3: #2b2724; --blanc-ligne: rgba(255, 255, 255, .12); --v-blanc: rgba(255, 255, 255, .07); --v-blanc-2: rgba(255, 255, 255, .10); --v-blanc-3: rgba(255, 255, 255, .13); --n-bg: #201d1a; --ng-bg: #201d1a; --ng-pale: #262320; --phare: #2b2724; --gold-bg: rgba(215, 178, 106, .10); --gold-soft: rgba(215, 178, 106, .16); --bevel: rgba(255, 255, 255, .10); /* textes */ --ink: #f3eee2; --ink-2: #d9d2c4; --muted: #b3a996; --faint: #a89e8c; --texte: #f3eee2; --encre: #f3eee2; --encre-2: #d9d2c4; --encre-3: #b3a996; --t-doux: #a89e8c; --v-encre: #f3eee2; --v-encre-2: #d9d2c4; --v-texte: #f3eee2; --v-gris: #a89e8c; --n-fg: #f3eee2; --ng-fg: #f3eee2; --n-dim: rgba(243, 238, 226, .68); --ng-dim: rgba(243, 238, 226, .68); /* lignes */ --line: rgba(255, 255, 255, .12); --line-soft: rgba(255, 255, 255, .07); --v-ligne: rgba(255, 255, 255, .12); --n-rule: rgba(255, 255, 255, .12); --ng-rule: rgba(255, 255, 255, .12); --gold-line: rgba(215, 178, 106, .28); --n-or-ligne: rgba(215, 178, 106, .30); /* le « or » de la charte monochrome : du noir → de l'ivoire, pas de l'or */ --gold: #f0e6d2; --gold-2: #f0e6d2; --gold-3: #f0e6d2; --or-vif: #f0e6d2; --or-texte: #f0e6d2; /* le vrai or de la marque : éclairci, jamais autre chose */ --or: #d7b26a; --n-or: #d7b26a; --ng-or: #d7b26a; --v-or: #d7b26a; --el-gold: #d7b26a; --n-or-texte: #e3c07c; --ng-or-texte: #e3c07c; --accent: #d7b26a; --accent-strong: #e3c07c; /* signaux */ --ok: #7fb26a; --danger: #e2766a; /* ombres : sur fond noir, une ombre doit être plus dense pour se voir */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 14px rgba(0, 0, 0, .50); --shadow-lg: 0 12px 34px rgba(0, 0, 0, .60); --ombre-1: 0 2px 6px rgba(0, 0, 0, .40); --ombre-2: 0 8px 22px rgba(0, 0, 0, .50); --ombre-3: 0 18px 44px rgba(0, 0, 0, .60); } } /* --- 15. LA PAGE ARTISAN GARDE SES PROPRES JETONS -------------------------------- ⚠️ /artisan ne pose pas ses jetons sur `:root` mais sur `.tn`, dans un bloc `