` voile de lisibilité en `z-index:-1`. Résultat : les images de la page — les trois exemples de l'accueil — s'affichaient EN BLANC, le compositeur du navigateur perdant leur calque. Le voile est désormais peint DANS le canvas (dernière passe de `dessiner()`), et il n'existe plus aucun élément plein écran autre que `#nuee-fond`. ⚠️ Ne jamais réintroduire de `

` de ce genre ici. ⚠️ LE CONTENU N'EST PAS TOUCHÉ. Aucun `z-index` de page n'est modifié, aucune carte, aucun menu ne change de plan : le canvas reste en `z-index:-2`, donc au-dessus du fond de `` et sous tout le reste. ⚠️ Le fond papier du canvas (propriété `background` ci-dessous) n'est qu'un repli pour l'instant qui précède la première image, quand le JS n'a pas encore tourné : dès la première image, le voile peint dans le canvas prend le relais. ============================================================================ */ #nuee-fond { position: fixed; inset: 0; z-index: -2; display: block; pointer-events: none; /* un décor ne capte jamais un clic */ background: linear-gradient(180deg, rgba(247, 244, 238, .62) 0%, rgba(247, 244, 238, .86) 42%, rgba(247, 244, 238, .97) 100%); } /* Les deux fonds pleine page laissent voir la nuée. Les surfaces de contenu (cartes, panneaux, menus, tableaux) gardent leur fond : elles restent nettes. */ html { background-color: var(--paper, #f7f4ee); } html.nuee-on body { background-color: transparent !important; } html.nuee-on .n-body { background: transparent !important; } /* Surface plein écran du gabarit « no scroll ». */ html.nuee-on .n-screen { background: transparent; } /* Le décor ne s'affiche pas à l'impression. */ @media print { #nuee-fond { display: none; } html { background: #fff; } } /* ===== fin nuee3d.css ===== */ /* ===== début passe-interface.css ===== */ /* ============================================================ PASSE D'INTERFACE — 2026-10-13 Feuille chargée EN DERNIER dans les deux familles de gabarits (`_head.html` pour les pages classiques, `n_base.html` + `_n_essentiel.html` pour les pages publiques). Elle ne réécrit aucune page : elle repose les mêmes composants avec une seule échelle, une seule palette et un seul rythme. ⚠️ CE QUI N'ALLAIT PAS, RELEVÉ PAGE PAR PAGE : 1. Le fond des pages publiques était BLANC PUR (`--n-bg: #ffffff`) et l'encre NOIRE (`--n-fg: #0a0a0a`), alors que la charte du site est ivoire (#f7f4ee) et encre chaude (#191713). La moitié du site était froide. 2. Chaque famille avait ses propres cotes de bouton, de carte et de champ. 3. Les titres de section n'avaient pas de repère : pas d'échelle commune entre l'accueil (titre géant) et une page de prix (titre moyen). 4. Le pied de page de la famille publique n'existait PAS (voir templates/_n_pied.html), et celui de la famille classique était clair, sans hiérarchie. 5. Aucun état de focus visible sur les champs : on tabulait dans le vide. ⚠️ ORDRE DE CHARGE : cette feuille DOIT rester la dernière. Les feuilles de page (`seo_*.html`, `admin_*.html`) qui viennent après gardent la main sur leur propre périmètre. ============================================================ */ :root { /* La charte, écrite une fois pour tout le site. */ --pi-papier: #f7f4ee; /* ivoire : le fond de tout le site */ --pi-papier-2: #efeae0; /* ivoire plus dense : bandeaux, survols */ --pi-carte: #fffdf9; /* le papier des cartes, plus clair que le fond */ --pi-encre: #191713; /* encre chaude, jamais du noir pur */ --pi-encre-doux: #6f675a; /* texte secondaire (4,9:1 sur ivoire) */ --pi-or: #b08a3e; /* aplats, traits, gros chiffres */ --pi-or-clair: #e8c887; /* or sur fond sombre */ --pi-or-profond: #8a6a2a; /* texte doré fin (4,6:1 sur ivoire) */ --pi-ligne: rgba(25, 23, 19, .10); --pi-ligne-forte: rgba(25, 23, 19, .18); --pi-ligne-or: rgba(176, 138, 62, .30); --pi-ombre-1: 0 1px 2px rgba(25, 23, 19, .05), 0 4px 14px rgba(25, 23, 19, .05); --pi-ombre-2: 0 10px 30px rgba(90, 70, 35, .10), 0 2px 6px rgba(90, 70, 35, .06); } /* ---------- 1. LE PAPIER ---------- */ html, body, .n-body, .n-screen, .vitrine { background-color: var(--pi-papier); } body, .n-body { color: var(--pi-encre); } /* Les jetons historiques pointent maintenant sur la charte : les pages qui les utilisent (elles sont nombreuses) suivent sans être touchées. */ :root { --n-bg: var(--pi-carte); --n-fg: var(--pi-encre); --n-dim: var(--pi-encre-doux); --n-rule: var(--pi-ligne); --n-or: var(--pi-or); --n-or-texte: var(--pi-or-profond); --n-or-ligne: var(--pi-ligne-or); } /* ---------- 2. L'ÉCHELLE TYPOGRAPHIQUE ---------- */ .n-title { font-size: clamp(2.1rem, 5.2vw, 5rem); line-height: .99; letter-spacing: -.022em; text-wrap: balance; } .n-kicker { color: var(--pi-or-profond); letter-spacing: .24em; font-size: .72rem; display: flex; align-items: center; gap: .7rem; } .n-kicker::before { /* un trait doré : la page a un début lisible */ content: ""; width: 28px; height: 1px; background: var(--pi-or); opacity: .75; flex: 0 0 auto; } .n-sub { font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.7; color: var(--pi-encre-doux); max-width: 58ch; text-wrap: pretty; } .n-car-label, h2, h3 { letter-spacing: -.01em; } /* ---------- 3. LES BOUTONS : une seule famille ---------- */ .n-btn, .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px; font-family: 'IBM Plex Mono', monospace; font-size: .76rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; cursor: pointer; background: var(--pi-encre); color: #fbf8f2; transition: transform var(--d-court, .16s) var(--t-doux, ease), box-shadow var(--d-court, .16s) var(--t-doux, ease), background-color var(--d-court, .16s), border-color var(--d-court, .16s), color var(--d-court, .16s); } .n-btn:hover, .btn:hover { transform: translateY(-1px); box-shadow: var(--pi-ombre-2); } .n-btn:active, .btn:active { transform: translateY(0); box-shadow: var(--pi-ombre-1); } /* Bouton or : encre sur or. C'est la règle de contraste de la charte (« --n-or : aplats ; encre des boutons or »). */ .n-btn--or, .btn.primary { background: var(--pi-or); color: #1c1607; } .n-btn--or:hover, .btn.primary:hover { background: #bd954a; } /* Bouton contour : pour l'action secondaire, jamais deux boutons pleins côte à côte. */ .n-btn-ghost, .btn.ghost { background: transparent; color: var(--pi-encre); border-color: var(--pi-ligne-forte); } .n-btn-ghost:hover, .btn.ghost:hover { border-color: var(--pi-or); color: var(--pi-or-profond); background: transparent; } .btn.big { min-height: 56px; padding: 0 30px; font-size: .8rem; } /* ---------- 4. LES CARTES ---------- */ .n-car-item, .n-plan, .n-preuve, .n-pay, .n-rappel__form, .card, .auth-card, .lead-benefit, .tn-chip, .n-pastille { background: var(--pi-carte); border: 1px solid var(--pi-ligne); border-radius: var(--r-lg, 22px); box-shadow: var(--pi-ombre-1); transition: transform var(--d-court, .16s) var(--t-doux, ease), box-shadow var(--d-court, .16s) var(--t-doux, ease), border-color var(--d-court, .16s); } .n-car-item:hover, .n-plan:hover, .n-preuve:hover, .lead-benefit:hover { transform: translateY(-2px); box-shadow: var(--pi-ombre-2); border-color: var(--pi-ligne-or); } .n-car-item { padding: 1.15rem 1.25rem; } .n-car-item h3 { color: var(--pi-encre); letter-spacing: -.005em; } .n-prix { color: var(--pi-or-profond); font-variant-numeric: tabular-nums; } .n-plan { padding: 1.9rem 1.7rem; } .n-plan__nom { color: var(--pi-or-profond); } .n-plan__prix { font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .n-plan--phare { border-color: var(--pi-ligne-or); box-shadow: var(--pi-ombre-2); } .n-plan__badge { background: var(--pi-or); color: #1c1607; border: 0; border-radius: 999px; } .n-plan__liste li::marker { color: var(--pi-or); } /* ---------- 5. LES CHAMPS ---------- */ input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], select, textarea { border-radius: var(--r-sm, 10px) !important; border: 1px solid var(--pi-ligne-forte) !important; background: #fff; color: var(--pi-encre); min-height: 52px; padding: 0 16px; font-size: 1rem; font-family: Inter, Archivo, system-ui, sans-serif; transition: border-color var(--d-court, .16s), box-shadow var(--d-court, .16s); } textarea { padding: 14px 16px; line-height: 1.6; min-height: 110px; } input::placeholder, textarea::placeholder { color: rgba(25, 23, 19, .42); } /* ⚠️ Sans anneau de focus, on tabule dans le vide : le champ actif doit se voir. */ input:focus, select:focus, textarea:focus, .n-btn:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible { outline: none; border-color: var(--pi-or) !important; box-shadow: 0 0 0 3px rgba(176, 138, 62, .18) !important; } a:focus-visible, .n-btn:focus-visible, .btn:focus-visible { outline: 2px solid var(--pi-or); outline-offset: 3px; box-shadow: none !important; } label { color: var(--pi-encre-doux); } /* ---------- 6. LA BARRE DU HAUT ---------- */ .n-head { background: rgba(247, 244, 238, .88) !important; -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--pi-ligne) !important; } .n-logo { color: var(--pi-encre) !important; letter-spacing: .01em; } .n-logo b { font-weight: 500; } .n-logo b span { color: var(--pi-or-profond); } .n-menu-btn { border-radius: 999px !important; border: 1px solid var(--pi-ligne-forte) !important; transition: border-color var(--d-court, .16s), background-color var(--d-court, .16s); } .n-menu-btn:hover { border-color: var(--pi-or) !important; background: var(--pi-papier-2); } /* ---------- 7. LE RYTHME DES SECTIONS ---------- */ .n-screen { padding-left: var(--n-pad); padding-right: var(--n-pad); } .n-car { gap: 1rem; scroll-padding-left: var(--n-pad); } .n-detail details { border: 1px solid var(--pi-ligne); border-radius: var(--r-md, 16px); background: var(--pi-carte); padding: 2px 20px 6px; margin-bottom: 10px; } .n-detail summary { cursor: pointer; padding: 16px 0; font-family: 'IBM Plex Mono', monospace; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pi-encre); list-style: none; } .n-detail summary::-webkit-details-marker { display: none; } .n-detail summary::after { content: "+"; float: right; color: var(--pi-or-profond); } .n-detail details[open] summary::after { content: "−"; } .n-detail p { color: var(--pi-encre-doux); line-height: 1.7; } /* Les quatre chiffres de l'accueil : un vrai bandeau, plus du texte posé. */ .n-facts { border-top: 1px solid var(--pi-ligne-or); border-bottom: 1px solid var(--pi-ligne-or); } .n-facts dt { color: var(--pi-or-profond); letter-spacing: .14em; } .n-facts dd { color: var(--pi-encre); font-variant-numeric: tabular-nums; } .n-facts > div { border-right-color: var(--pi-ligne); } /* ---------- 8. DÉTAILS ---------- */ ::selection { background: rgba(176, 138, 62, .26); } html { scroll-behavior: smooth; } a, button, summary { -webkit-tap-highlight-color: transparent; } img { max-width: 100%; } /* ---------- 9. LES PIEDS DE PAGE : la même encre pour les deux familles ---------- * ⚠️ Le pied public n'existait pas (voir templates/_n_pied.html) et celui de la famille classique était clair, sans hiérarchie, avec un logo à fond clair. Les deux passent sur l'encre du site, texte ivoire, accents or. */ .np, .footer { background: var(--pi-encre); color: #e7e0d2; padding: 3.6rem var(--n-pad, 28px) 2rem; } .np a, .footer a, .np__mail, .footer-mail, .footer-tagline { color: #e7e0d2; text-decoration: none; opacity: .8; transition: color var(--d-court, .16s), opacity var(--d-court, .16s); } .np a:hover, .footer a:hover { color: var(--pi-or-clair); opacity: 1; } .np__grille { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.4rem; max-width: 1120px; margin: 0 auto; } .np__logo { font-family: Anton, Archivo, sans-serif; font-size: 1.4rem; letter-spacing: .01em; text-transform: lowercase; opacity: 1 !important; color: #f6f1e7 !important; } .np__phrase { margin: .9rem 0 .6rem; max-width: 34ch; font-size: .95rem; line-height: 1.65; opacity: .72; } .np__titre, .footer h4 { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pi-or-clair); margin: 0 0 1rem; } .np__col { display: flex; flex-direction: column; gap: .62rem; font-size: .95rem; } .np__bas { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; max-width: 1120px; margin: 3rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(232, 200, 135, .18); font-size: .82rem; opacity: .7; } .np__liens { display: flex; gap: 1.2rem; } /* la famille classique : on garde sa grille et son bloc de marque, on change l'encre */ .footer { padding: 3.2rem 0 1.8rem; } .footer-grid { max-width: 1120px; margin: 0 auto; padding: 0 var(--n-pad, 28px); gap: 2.4rem; } .footer .brand-name { color: #f6f1e7; } .footer .brand-name span { color: var(--pi-or-clair); } /* ⚠️ Le logo de la marque est un fichier à fond clair : sur l'encre il disparaîtrait. On garde le mot-symbole, qui lui est lisible. */ .footer .brand-mark { display: none; } .footer h4 { margin-bottom: .85rem; } @media (max-width: 980px) { .np__grille { grid-template-columns: 1fr 1fr; gap: 1.9rem; } } @media (max-width: 560px) { .np__grille { grid-template-columns: 1fr; gap: 1.6rem; } .np__bas { flex-direction: column; align-items: flex-start; margin-top: 2rem; } } /* ---------- 10. FINITIONS DE LA PREMIÈRE PASSE (mesurées à l'écran) ---------- */ /* ⚠️ Le titre de l'accueil plafonnait à 48 px en 1440 : `no_scroll_dimension.css` verrouille la taille des titres en `@media (min-width: 900px)` avec `!important` (3,333 vw). Un hero qui vend « vous êtes invisible sur Google » mérite plus d'autorité. C'est le SEUL endroit de cette passe où l'on écrit `!important` — il faut bien relever un verrou pour le relever. */ .n-screen--accueil .n-title, .n-screen--pay .n-title { font-size: clamp(2.4rem, 4.7vw, 4.4rem) !important; letter-spacing: -.02em; } /* Le hero prend la largeur de l'écran : le regard descend, il ne balaie pas. */ .n-screen--accueil .n-sub { max-width: 52ch; } /* ⚠️ `.n-blur` posait un gros aplat beige en haut à droite : sur le papier ivoire il se lit comme un bloc inachevé, pas comme une lumière. On en fait une lueur très douce, et on la garde hors du texte. */ .n-blur { opacity: .45 !important; filter: blur(60px) saturate(120%) !important; } .n-blur span { background: radial-gradient(circle at 50% 50%, rgba(176,138,62,.32), rgba(176,138,62,0) 72%) !important; } /* Les exemples : le métier en étiquette dorée, la description discrète. */ .n-preuves__tete { color: var(--pi-encre); letter-spacing: .2em; } .n-preuve__corps { padding: .9rem 1.1rem 1.05rem; } .n-preuve__corps b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pi-or-profond); } .n-preuve__quoi { color: var(--pi-encre-doux); font-size: .9rem; } .n-preuve { overflow: hidden; } .n-preuve__visuel { display: block; border-bottom: 1px solid var(--pi-ligne); } .n-preuves__plus { display: inline-flex; align-items: center; gap: .5rem; font-family: 'IBM Plex Mono', monospace; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pi-or-profond); text-decoration: none; } .n-preuves__plus:hover { color: var(--pi-encre); } /* Le carrousel de prestations : même hauteur de carte, titre en encre, prix en or. */ .n-car-item h3 { font-size: 1.02rem; } .n-car-item .n-prix { font-size: .95rem; } /* Les listes d'offres : un tiret doré, pas un carré de navigateur. */ .n-plan__liste { list-style: none; padding-left: 0; } .n-plan__liste li { position: relative; padding-left: 1.15rem; } .n-plan__liste li::before { content: "—"; position: absolute; left: 0; color: var(--pi-or); } .n-plan__liste li::marker { content: ""; } /* ---------- 11. LES ÉCRANS NE TRONQUENT PLUS LEUR DERNIER BLOC ---------- ⚠️⚠️ MESURÉ sur /pricing : `section.n-screen--prix` a `height: 100svh` (900 px) et `overflow: hidden auto`. Le bloc « DevisalySEO » qui la suit était donc COUPÉ EN DEUX au ras du bas de l'écran. Le défaut passait inaperçu tant que la page se terminait là ; depuis qu'elle a un pied de page, la coupure saute aux yeux. L'écran garde sa hauteur minimale (l'effet « une seule page »), mais il ne tronque plus : ce qui dépasse allonge la page au lieu d'être perdu. */ .n-screen--prix { height: auto !important; min-height: 100svh; overflow: visible !important; } /* ---------- 12. LES EXEMPLES SUR MOBILE : une rangée qu'on fait glisser ---------- ⚠️ Mesuré en 390 px : la grille des exemples restait en trois colonnes, chaque étiquette se cassait sur quatre lignes (« PLOMBIER / Dépannage et installations, à Lyon »). On passe en rangée glissante — c'est déjà le langage du site pour les carrousels (« FAITES DÉFILER ») — avec accroche au doigt. */ @media (max-width: 860px) { /* ⚠️ La grille gardait `grid-template-columns: repeat(3, 1fr)` d'une autre feuille : tant qu'on ne la neutralise pas, les items restent à 1fr et les étiquettes se cassent sur quatre lignes. */ .n-preuves__grille { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: 78% !important; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--n-pad, 20px); -webkit-overflow-scrolling: touch; padding-bottom: .4rem; } .n-preuves__grille::-webkit-scrollbar { display: none; } .n-preuve { scroll-snap-align: start; } .n-preuve__corps b { font-size: .7rem; } .n-preuve__quoi { font-size: .86rem; } } /* ============================================================ 13. UNE SEULE COLONNE DE CONTENU (2026-10-13, « tout n'est pas centré ») ⚠️⚠️ CE QUE LA MESURE MONTRE. Le site n'a pas UNE grille, il en a cinq. Bords gauches relevés en 1440 px de large : accueil, /pricing, /services, /blog, pages prix 56 px (pleine largeur) /visibilite, /leads, /contact, /artisan 130 px pied de page classique 155 px bandeau « être rappelé » et pied public 160 px carte de connexion 500 px (centrée) Cinq bords gauches : le logo de la barre (56) ne tombe jamais sur le texte de la page, et le pied ne tombe sur rien. C'est ça, le « décalé » — ce n'est pas une impression, c'est mesuré. ⚠️ LA RÈGLE. Une colonne de 1120 px, centrée, jamais moins de 28 px de marge : c'est déjà la largeur du pied, du bandeau, des pages /leads et /visibilite, et du `.container` historique. On aligne les pages « pleine largeur » sur elle, plutôt que l'inverse : le texte d'un paragraphe ne doit pas courir sur 1328 px. ============================================================ */ :root { --pi-colonne: 1120px; } /* Les écrans de la famille no-scroll : la gouttière devient une gouttière de colonne. `padding-inline` ne touche pas le `padding-top` de chaque écran. */ .n-screen { padding-inline: max(var(--n-pad, 28px), calc((100% - var(--pi-colonne)) / 2)) !important; } /* Les pages à formulaire (leads, contact, artisan, tunnel) : même colonne. */ .n-formwrap, .artisan-hero { padding-inline: max(24px, calc((100% - var(--pi-colonne)) / 2)) !important; } /* Le bandeau « être rappelé ». */ .n-rappel { max-width: none; padding-inline: max(var(--n-pad, 28px), calc((100% - var(--pi-colonne)) / 2)); } .n-rappel__txt, .n-rappel__form { max-width: 520px; } /* Le pied de page public : même colonne que la page, pas 104 px plus à droite. */ .np__grille, .np__bas { max-width: none; padding-inline: max(var(--n-pad, 28px), calc((100% - var(--pi-colonne)) / 2)); } /* Le pied de page classique : sa colonne est celle de `.container` (1120 px avec ses 28 px internes). On enlève la marge double qui le décalait de 25 px. */ .footer-grid { max-width: var(--pi-colonne); margin: 0 auto; padding-inline: 0; } .footer .container { max-width: none; padding-inline: 0; } /* ⚠️ Sur mobile, la carte de connexion touchait les deux bords : centrée sur grand écran, collée aux bords en 390 px. */ @media (max-width: 620px) { .auth-body .auth-card, .auth-card { width: auto; margin-inline: 20px; } } /* ⚠️⚠️ ET LA BARRE DU HAUT N'ÉTAIT PAS SUR LA COLONNE. Le logo est à 56 px du bord alors que TOUT le texte des pages commence à 153 px : sur chaque page, le mot-symbole flottait à gauche de tout le reste — c'est le premier « décalage » qui saute aux yeux. La barre reste pleine largeur (son filet traverse l'écran), mais son contenu se cale sur la colonne, et le bouton MENU sur le bord droit. */ .n-head { padding-inline: max(var(--ng-pad, 24px), calc((100% - var(--pi-colonne)) / 2)) !important; } /* ============================================================ 14. LE RYTHME VERTICAL, LE BOUTON DE BARRE, LES DERNIERS DÉCALAGES ============================================================ */ /* ---------- 14.1 Un rythme vertical, au lieu de paddings au cas par cas ---------- ⚠️ Les écarts entre sur-titre, titre, sous-titre, boutons et blocs étaient posés à la main dans huit feuilles (22, 26, 32, 48 px selon l'endroit). Une seule échelle : 8, 16, 24, 32, 48, 64. */ .n-kicker { margin-bottom: 20px; } .n-title { margin: 0; } .n-sub { margin-top: 24px; } .n-cta { margin-top: 32px; } .n-preuves { margin-top: 48px; } .n-facts { margin-top: 40px; } .n-facts dt { margin-top: 8px; } .n-facts dd { margin-top: 16px; } .n-detail { margin-top: 48px; } .n-car-item { padding: 20px 22px; } .n-plan { padding: 32px 30px; } .n-plan__pied { margin-top: 24px; } .n-pay { margin-top: 48px; padding-top: 32px; } .n-rappel { padding-block: 64px 72px; } .np { padding-block: 64px 32px; } .np__bas { margin-top: 48px; padding-top: 24px; } /* ---------- 14.2 Le bouton de conversion dans la barre du haut ---------- ⚠️ Ajouté dans les deux partials de barre. Un bouton discret, à gauche du MENU : c'est la seule action du site qui rapporte. */ .n-head__cta { margin-left: auto; margin-right: 14px; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--pi-or); color: #1c1607; font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color var(--d-court, .16s), transform var(--d-court, .16s); } .n-head__cta:hover { background: #bd954a; transform: translateY(-1px); } @media (max-width: 560px) { .n-head__cta { min-height: 36px; padding: 0 13px; font-size: .64rem; letter-spacing: .1em; margin-right: 8px; } } /* ---------- 14.2 bis Le bouton « Appeler » (2026-10-13) ---------- ⚠️ UN SEUL BOUTON OR PAR ÉCRAN : « Être rappelé » le reste. Celui-ci est en CONTOUR (fond transparent, filet d'encre), donc il ne concurrence pas l'action qui rapporte, et il reste lisible sur le fond clair comme sur le fond or. ⚠️ IL PORTE `margin-left: auto`, PAS `.n-head__cta` SEUL. La barre est en `justify-content: space-between` : c'est ce `margin-left:auto` qui pousse le bloc des actions vers la droite. Posé AVANT « Être rappelé » dans le DOM, il pousse donc les deux boutons ensemble et laisse le logo à gauche. Vérifié en 390 px : la barre ne débordait plus dès qu'on l'a masqué sous 900 px (voir plus bas). ⚠️ IL DISPARAÎT SOUS 900 px. À 390 px, la barre porte le logo, « Être rappelé » et le bouton MENU : un quatrième élément la faisait passer à la ligne. Le numéro reste joignable depuis le pied du menu plein écran (`_n_menu.html`), et c'est justement sur téléphone qu'un `tel:` est le plus utile — on ne le supprime donc pas, on le déplace. */ .n-head__tel { margin-left: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(10, 10, 10, .35); border-radius: 999px; background: transparent; color: #0a0a0a; text-decoration: none; white-space: nowrap; font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; transition: border-color var(--d-court, .16s), color var(--d-court, .16s); } .n-head__tel:hover { border-color: var(--pi-or, #b8892e); color: #8a6a2a; } /* ⚠️ Quand « Appeler » est là, c'est LUI qui pousse à droite : « Être rappelé » ne doit plus le refaire, sinon les deux se disputent la marge automatique et le logo part au milieu. */ .n-head__tel + .n-head__cta { margin-left: 14px; } @media (max-width: 900px) { .n-head__tel { display: none; } .n-head__cta { margin-left: auto; } } /* ---------- 14.3 Les deux derniers décalages mesurés ---------- ⚠️ 1. La famille classique posait son contenu 7 px à droite du reste (`.container { max-width: 1120px; padding: 0 28px }` : le contenu interne commençait à 160 px quand la colonne publique commence à 153). En élargissant le conteneur de ses deux gouttières, les deux familles tombent au même pixel. ⚠️ 2. Le menu plein écran gardait la gouttière de 56 px : ses entrées ne tombaient pas sur la colonne du contenu qu'elles recouvrent. */ .container { max-width: calc(var(--pi-colonne) + 56px) !important; } .n-menu, .n-menu-foot, .n-menu-group { padding-inline: max(24px, calc((100% - var(--pi-colonne)) / 2)) !important; } /* ---------- 14.4 Un seul texte restait sous le seuil AA ---------- ⚠️ « Visibilité Pro » : or profond #8a6a2a sur la carte ivoire, corps 10,6 px, rapport mesuré 4,20:1 (seuil 4,5:1). On assombrit l'or des étiquettes posées sur une carte, sans toucher à l'or des grands aplats (la charte le réserve aux gros chiffres et aux traits). */ .n-plan__nom, .n-preuve__corps b { color: #74581f; } /* ============================================================ 15. LE DÉCOR NE DOIT PAS PASSER DEVANT LES CHIFFRES (2026-10-13) ⚠️ CONSTAT. Sur une page de prix (`/prix//`), le décor de la nuée se lit comme des RECTANGLES PÂLES posés derrière le titre et la grille de tarifs : des blocs gris à bords droits, qui donnent l'impression d'une page inachevée. Sur l'accueil, les cartes flottantes sont dans une scène plein écran, elles se lisent comme un décor ; ici, l'écran est court (577 px), le contenu est dense et commence tout en haut, donc les cartes tombent DERRIÈRE des chiffres. ⚠️ CE QU'ON NE FAIT PAS : poser un calque pardessus pour baisser le contraste. Un calque plein écran en plus du canvas fait disparaître les images de la page (bug des exemples blancs, commit 86534c4). On baisse l'opacité DU CANVAS, ce qui éclaircit aussi son voile de lisibilité — et comme le voile est peint DANS le canvas, le texte gagne en contraste au lieu d'en perdre. ⚠️ `:has()` plutôt qu'une classe de page : le canvas est posé par le script à la racine du document, il n'est donc pas un descendant de l'écran. Sans `:has()`, il faudrait modifier chaque gabarit. Navigateurs anciens : le décor garde sa pleine opacité, rien ne casse. */ body:has(.n-screen--prix) #nuee-fond, body:has(.n-screen--serre) #nuee-fond { opacity: .42; } /* ============================================================ 16. L'ACCROCHE ET LE VÉRIFICATEUR — ACCUEIL, EN MODE PC (2026-10-13) ⚠️ CONSTAT DU CLIENT : « en mode PC, le site fait très vite ». Mesure : à 1440 px, le titre plafonnait à 68 px, la phrase d'accroche n'existait pas, et l'écran enchaînait sur une grille d'exemples — rien n'arrêtait l'œil, tout défilait. Sur une page qui vend de la visibilité, l'écran doit poser un constat, une promesse, une preuve vérifiable, puis une action. Dans cet ordre. ============================================================ */ /* ---------- 16.1 Le titre et l'accroche, plus haut en mode PC ---------- */ @media (min-width: 900px) { .n-screen--accueil .n-title { font-size: clamp(3rem, 5.4vw, 5.4rem) !important; /* 78 px en 1440, 86 px en 1920 */ line-height: .98 !important; max-width: 22ch; } } .n-hook { font-family: 'Archivo', Arial, sans-serif; font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.6rem); line-height: 1.25; color: var(--pi-or-profond); margin: 6mm 0 0; max-width: 34ch; /* ⚠️ Pas d'emoji, pas de flèche, pas de gras criard : la phrase est la seule chose en gras or de l'écran, c'est ce qui la fait lire. */ } .n-hook b { font-weight: 700; color: var(--pi-encre); } /* ---------- 16.1 bis La ligne « tout est dit » ---------- ⚠️ Demande utilisateur (2026-10-14) : « attirer l'œil sur le fait qu'il n'y a pas de blabla, tout est rapide et limpide ». UNE ligne, sous les boutons : le prix, le délai, et ce qu'il reste à faire (rien). Le filet au-dessus la détache des boutons sans ajouter un bloc de plus à l'écran, et les chiffres sont en or profond : c'est ce que l'œil doit attraper. Aucune phrase de plus. */ .n-dit { margin: 22px 0 0; padding-top: 14px; border-top: .7pt solid var(--pi-ligne); font-family: 'IBM Plex Mono', monospace; font-size: .82rem; line-height: 1.5; letter-spacing: .04em; color: var(--pi-encre-doux); } .n-dit b { font-weight: 700; color: var(--pi-or-profond); white-space: nowrap; } /* ---------- 16.2 Le vérificateur de visibilité ---------- */ .n-verif { border: .7pt solid var(--pi-filet); border-top: 2pt solid var(--pi-or); padding: 5mm 6mm 4.5mm; margin: 8mm 0 0; max-width: 100%; } .n-verif__titre { font-family: 'Archivo', Arial, sans-serif; font-weight: 700; font-size: 1.02rem; margin: 0 0 2mm; color: var(--pi-encre); } .n-verif__note { font-size: .84rem; color: var(--pi-muted); margin: 0 0 4mm; max-width: 76ch; } .n-verif__note b { color: var(--pi-encre); font-weight: 700; } .n-verif__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4mm 6mm; } .n-verif__champ { display: flex; flex-direction: column; gap: 1.6mm; min-width: 200px; } .n-verif__champ > span { font-family: 'PlexMono', ui-monospace, monospace; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pi-muted); } .n-verif__champ select { appearance: none; -webkit-appearance: none; font-family: 'Archivo', Arial, sans-serif; font-size: .9rem; color: var(--pi-encre); background: transparent; border: 0; border-bottom: 1pt solid var(--pi-encre); border-radius: 0; padding: 2mm 6mm 2mm 0; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--pi-encre) 50%), linear-gradient(135deg, var(--pi-encre) 50%, transparent 50%); background-position: right 3mm center, right 1.4mm center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .n-verif__champ select:focus-visible { outline: 2px solid var(--pi-or); outline-offset: 2px; } .n-verif__bas { font-size: .74rem; color: var(--pi-muted); margin: 3.5mm 0 0; } /* Le bouton encre : la deuxième action de l'écran, distincte du bouton or. */ .n-btn--encre { background: var(--pi-encre); color: #f7f4ee; border-color: var(--pi-encre); } .n-btn--encre:hover { background: #2b2620; border-color: #2b2620; } @media (max-width: 700px) { .n-verif { padding: 4mm 4.5mm; } .n-verif__form { gap: 3mm; } .n-verif__champ { min-width: 100%; } .n-btn--encre { width: 100%; justify-content: center; } } /* ---------- 16.3 En mode PC, l'écran se compose en deux colonnes ---------- ⚠️ MESURE À 1920 px : le titre et l'accroche n'occupaient que le tiers gauche de l'écran, le reste était vide. Sur une page qui vend, la moitié droite est la place naturelle de la preuve : le vérificateur y monte, à hauteur du titre, sans qu'on ait à défiler. Les exemples et la barre de chiffres restent en pleine largeur. */ @media (min-width: 1180px) { .n-screen--accueil { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 14mm; row-gap: 0; /* ⚠️⚠️ MESURÉ : la boîte restait hauteur 100svh alors que le contenu en demande 1128 px. Avec `align-content: center`, le débordement part DES DEUX CÔTÉS : le sur-titre se retrouvait à y=28, c'est-à-dire DERRIÈRE la barre de 63 px — invisible. On rend donc la hauteur élastique et on colle le contenu en haut, sous la barre. Le défilement redevient normal, rien n'est coupé. */ height: auto !important; min-height: 100svh; align-content: start; padding-top: 104px !important; } .n-screen--accueil > .n-kicker, .n-screen--accueil > .n-title, .n-screen--accueil > .n-hook, .n-screen--accueil > .n-sub, .n-screen--accueil > .n-cta { grid-column: 1; } .n-screen--accueil > .n-verif { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin-top: 0; } .n-screen--accueil > .n-preuves, .n-screen--accueil > .n-facts { grid-column: 1 / -1; } .n-screen--accueil > .n-preuves { margin-top: 10mm; } } /* ---------- 16.4 L'accueil respire plus large que les pages de contenu ---------- ⚠️ La colonne unique de 1120 px vaut pour les pages de texte (prix, blog, CGV). Sur l'accueil en 1920 px, elle laissait 400 px de vide de chaque côté : une page de vente qui n'occupe que le centre de l'écran ne vend pas. On élargit L'ACCUEIL SEUL à 1400 px, et seulement au-delà de 1180 px. Les paragraphes gardent leur propre largeur de lecture (max-width en ch) : la colonne élargie ne rallonge aucune ligne de texte. */ @media (min-width: 1180px) { .n-screen--accueil { padding-inline: max(var(--n-pad, 56px), calc((100% - 1400px) / 2)) !important; } .n-screen--accueil .n-sub { max-width: 52ch; } } /* ===== fin passe-interface.css ===== */