/* ============================================================ seo-landing.css, la coque commune des pages statiques ============================================================ Chargée par les ~75 pages indexées (comparatifs, métiers, méthode, glossaire, avis, fondateur). Elle leur donne l'en-tête, le pied de page et la typographie du site. ------------------------------------------------------------ ELLE DÉPEND DE tokens.css, QUI DOIT ÊTRE CHARGÉ AVANT ------------------------------------------------------------ Refonte du 30 juillet 2026, demande de Noah : « que sur absolument toutes nos pages indexées ce soit le header du site ». Avant, ce fichier était autonome : sa propre remise à zéro, ses propres couleurs en hexadécimal, Geist partout, et une barre d'en-tête pleine largeur. Les pages statiques ressemblaient donc à un second site, cousin du vrai, même logo, mais pas les mêmes titres ni les mêmes gris. Maintenant elle s'appuie sur `/app/styles/tokens.css`, la feuille de l'application : mêmes variables de couleur, Coolvetica pour les titres, Geist pour le texte, Sora pour les chiffres. Les deux se chargent dans cet ordre, jamais l'inverse. ------------------------------------------------------------ IL Y AVAIT DEUX COPIES DE CE FICHIER ------------------------------------------------------------ Une à la racine, une dans /seo/, et les 13 pages métier pointaient vers la seconde. Elle avait cessé d'être mise à jour : le bloc « Sources et méthode » ajouté le 30 juillet 2026 s'affichait sans aucun style sur ces 13 pages, sans que rien ne le signale. La copie /seo/seo-landing.css a été SUPPRIMÉE, et toutes les pages pointent désormais vers /seo-landing.css. Ne pas la recréer : un fichier dupliqué qu'on oublie de mettre à jour est pire qu'un fichier partagé qu'on doit tester. ============================================================ */ /* ------------------------------------------------------------ 1. BASE ------------------------------------------------------------ tokens.css pose déjà la remise à zéro, la police du corps et les tailles de titre. On ne redéfinit ici que ce qui diffère sur une page de contenu : une colonne de lecture plus étroite que l'application, et des titres un cran plus petits, un comparatif n'est pas une page d'accueil, ses H1 ne doivent pas occuper un écran entier. */ /* `display: flow-root`, LA BANDE CLAIRE AU-DESSUS DE L'EN-TÊTE · 6 août 2026. Symptôme : sur toute la largeur, juste au-dessus de la pilule, un liseré plus clair que le reste du haut de page. 14 px sur ordinateur, 10 px sur mobile, soit exactement le `margin-top` de `.nav-wrap` (l. 149 et 203). Ce n'est pas une marge du body : tokens.css l. 244 la remet déjà à zéro. C'est la FUSION DES MARGES. `.nav-wrap` est `position: sticky`, donc il reste dans le flux normal, et le body n'a ni bordure ni remplissage pour l'arrêter : sa marge haute traverse le body et déplace la boîte du body de 14 px vers le bas. Or `.voile` est en `position: absolute; top: 0`, calé sur la boîte de remplissage du body, il démarrait donc 14 px trop bas, et ces 14 px laissaient voir le fond du canevas (var(--bg-section), presque blanc) au lieu du dégradé teinté. `flow-root` crée un contexte de formatage de bloc : les marges des enfants ne fusionnent plus avec celles du body. Mesuré dans Chrome avant/après sur /planity-vs-clientbase : .voile passe de 14 px à 0, la pilule ne bouge pas (14 px avant comme après, hauteur 61,7 px inchangée). Ne pas « corriger » en donnant un `top` négatif à .voile : la valeur change selon la largeur d'écran (14 px / 10 px), et le décalage reviendrait au premier ajustement de `.nav-wrap`. */ /* Ces pages ouvrent plus bleutees que l'application : mesure 243,245,253. La bande du haut suit, sinon elle poserait un liseré plus clair. */ :root{ --cb-fond-site: #F4F6FE; } body{ background: var(--bg-section); position: relative; display: flow-root; } .container{ max-width: 880px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 26px); } h1{ font-family: var(--ff-display); font-size: clamp(34px, 5.2vw, 58px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 18px; font-weight: 400; } /* LE MOT MIS EN AVANT PASSE A L ECRITURE MANUSCRITE · 26 aout 2026. Meme raison que sur les comparatifs : le bandeau surligne venait d avant la DA, c etait le seul moyen d insister sans changer de police. La main dit la meme chose, et surtout la MEME chose que le titre d accueil. */ h1 .hl{ font-family: var(--ff-hand); font-style: italic; font-weight: 400; font-size: 1.16em; line-height: .82; letter-spacing: 0; color: var(--accent); background: none; padding: 0 .02em; } h2{ font-family: var(--ff-display); font-size: clamp(24px, 3.2vw, 36px); line-height: 1.08; letter-spacing: -.015em; margin: 52px 0 14px; font-weight: 400; } h3{ font-size: 18px; margin: 24px 0 8px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); } p{ margin: 0 0 14px; font-size: 15.5px; line-height: 1.68; color: var(--ink-2); } ul, ol{ padding-left: 22px; margin: 0 0 16px; } li{ margin-bottom: 6px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); } a{ color: var(--accent-ink); } main a:not(.cta):not(.puce):hover{ text-decoration: underline; } code{ background: var(--bg-alt); padding: 2px 6px; border-radius: 5px; font-family: var(--ff-mono); font-size: 13.5px; color: var(--accent-ink); } /* L’ancien intertitre en petites capitales espacées a été remplacé le 26 août 2026 par sa version manuscrite, en bas de ce fichier. */ .lede{ font-size: clamp(16.5px, 1.8vw, 19px); color: var(--ink-2); margin: 0 0 26px; max-width: 680px; line-height: 1.6; } main{ padding: 34px 0 0; } /* ------------------------------------------------------------ 2. ACCESSIBILITÉ ------------------------------------------------------------ */ *:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; } .skip-link{ position: absolute; top: -100px; left: 12px; z-index: 99; padding: 10px 16px; background: var(--accent); color: #fff; border-radius: 0 0 10px 10px; font-weight: 600; font-size: 14px; transition: top .2s; } .skip-link:focus{ top: 0; text-decoration: none; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .tache{ animation: none !important; } } /* ------------------------------------------------------------ 3. VOILE DE COULEUR · ancré en HAUT DE PAGE ------------------------------------------------------------ L'en-tête est une pilule qui FLOTTE : elle ne peint pas son fond sur toute la largeur, on voit la page derrière et autour. Si la couleur commence à la première section, la bande occupée par la pilule retombe sur le fond nu du body, une barre blanche en travers du haut de page. D'où ce calque posé à `top:0`, premier élément du corps. RÈGLE : tant que l'en-tête est une pilule translucide, ce qui est derrière elle doit être peint par un élément qui commence à zéro, jamais par la première section. */ .voile{ position: absolute; top: 0; left: 0; right: 0; height: 620px; pointer-events: none; z-index: 0; overflow: hidden; background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 6%, var(--bg-section)) 0%, var(--bg-section) 88%); } .tache{ position: absolute; border-radius: 50%; filter: blur(76px); opacity: .45; will-change: transform; } .tache.t1{ width: 440px; height: 440px; top: -190px; left: -130px; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 52%, transparent) 0%, transparent 70%); animation: derive1 19s ease-in-out infinite; } .tache.t2{ width: 380px; height: 380px; top: -120px; right: -140px; background: radial-gradient(circle, color-mix(in oklab, #C97558 40%, transparent) 0%, transparent 70%); animation: derive2 23s ease-in-out infinite; } @keyframes derive1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,40px) scale(1.12)} } @keyframes derive2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,55px) scale(1.08)} } /* Tout le contenu passe au-dessus du calque. */ .nav-wrap, main, footer{ position: relative; z-index: 1; } /* ------------------------------------------------------------ 4. EN-TÊTE EN PILULE FLOTTANTE ------------------------------------------------------------ Report fidèle du composant de l'application (app/src/shared.jsx, ~l.3127). Valeurs identiques : 14 px du haut, hauteur 60, rayon 999, blanc à 74 % avec flou d'arrière-plan. `margin-top` DOIT valoir exactement `top` : un élément `sticky` reste dans le flux au repos et ne se décale qu'au défilement. Sans cette marge, la pilule est collée en haut à l'arrêt puis SAUTE de 14 px au premier scroll. Le piège est documenté dans shared.jsx. */ .nav-wrap{ /* ⚠️ L'ENCOCHE VA DANS LES DEUX. La page déclare `viewport-fit=cover` : sans cet ajout, la pilule se dessine sous la Dynamic Island, qui recouvre le logo. Et `margin-top` doit rester égal à `top`, sinon la pilule saute de quatorze pixels au premier défilement. `env()` vaut zéro partout ailleurs. */ position: sticky; z-index: 40; top: calc(14px + env(safe-area-inset-top, 0px)); margin-top: calc(14px + env(safe-area-inset-top, 0px)); display: flex; justify-content: center; padding: 0 clamp(14px, 3vw, 26px); pointer-events: none; } .pilule{ display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 1320px; min-height: 60px; padding: 8px 10px 8px 20px; border-radius: 999px; background: rgba(255,255,255,0.74); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid rgba(20,20,22,0.07); box-shadow: 0 12px 40px -18px rgba(20,20,40,0.25); pointer-events: auto; } .nav-gauche{ display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); } .marque{ display: inline-flex; align-items: center; gap: 9px; } .marque:hover{ text-decoration: none; } .marque .mark{ position: relative; display: inline-flex; transition: transform .28s cubic-bezier(.22,1,.36,1); } .marque:hover .mark{ transform: translateY(-1.5px); } /* Ombre en élément positionné plutôt qu'en `filter` : un drop-shadow sur un SVG force le rendu GPU et fait perdre l'antialiasing sous-pixel - le logo devient flou. Même choix que dans l'application. */ .marque .halo{ position: absolute; inset: 0; border-radius: 8.5px; background: var(--accent); opacity: 0; filter: blur(11px); transform: translateY(4px) scale(.95); transition: opacity .28s ease; z-index: -1; pointer-events: none; } .marque:hover .halo{ opacity: .3; } .marque .mot{ font-family: var(--ff-logo); font-weight: 600; font-size: 20px; letter-spacing: -.025em; color: var(--ink); transition: color .25s ease; } .marque:hover .mot{ color: var(--accent-ink); } .nav-liens{ display: flex; gap: 4px; align-items: center; } .nav-liens a{ padding: 8px 14px; font-size: 14px; font-weight: 460; color: var(--ink-3); border-radius: 999px; transition: color .15s, background .15s; } .nav-liens a:hover{ color: var(--ink); background: var(--bg-alt); text-decoration: none; } .nav-liens a.actif{ color: var(--accent-ink); background: var(--accent-soft); font-weight: 580; } .nav-cta{ display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -.01em; transition: transform .15s ease, box-shadow .2s ease; white-space: nowrap; } .nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(90,80,230,.5); text-decoration: none; } @media (max-width: 900px){ .nav-liens{ display: none; } } /* Téléphone : la pilule RESTE une pilule (arbitrage de Noah du 27 juillet, cf. app/index.html). On réduit la hauteur et le décalage, rien d'autre. */ @media (max-width: 720px){ /* L'écart d'encoche vaut aussi ici : cette règle mobile écrasait la valeur de base, et la pilule repassait sous la Dynamic Island. Les deux valeurs restent égales, sinon elle saute au premier défilement. */ .nav-wrap{ top: calc(10px + env(safe-area-inset-top, 0px)); margin-top: calc(10px + env(safe-area-inset-top, 0px)); } .pilule{ min-height: 54px; padding: 7px 8px 7px 16px; background: rgba(255,255,255,0.86); } .marque .mot{ font-size: 18px; } .nav-cta{ padding: 10px 15px; font-size: 13.5px; } } @media (max-width: 380px){ .nav-cta{ padding: 9px 13px; font-size: 12.5px; } } /* ------------------------------------------------------------ 5. BOUTONS ET SIGNAUX DE CONFIANCE ------------------------------------------------------------ */ .cta{ display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--accent); color: #fff; border-radius: 999px; font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; transition: transform .15s, box-shadow .2s; } .cta:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(90,80,230,.45); text-decoration: none; } .cta-ghost{ background: transparent; border: 1px solid var(--line-strong); color: var(--ink); } .cta-ghost:hover{ background: var(--bg-alt); box-shadow: none; } .hero-cta{ display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 18px; } .trust-row{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; } .trust-pill{ display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--ink-2); font-weight: 540; } .trust-pill .trust-icon{ font-size: 14px; line-height: 1; } /* ------------------------------------------------------------ 6. TABLEAUX, CARTES, FAQ ------------------------------------------------------------ */ .table-wrap{ margin: 18px 0 30px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); } table{ width: 100%; border-collapse: collapse; font-size: 14.5px; } th, td{ padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); } thead th{ background: var(--bg-alt); font-weight: 600; color: var(--ink); } tbody tr:last-child td{ border-bottom: none; } td.yes{ color: #0F7B4F; font-weight: 600; } td.no{ color: var(--ink-4); } td.partial{ color: #B4690E; font-weight: 500; } .card{ background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin: 20px 0; } .card-accent{ background: var(--accent-soft); border-color: var(--accent-soft-2); } .faq dt{ font-weight: 600; font-size: 16px; color: var(--ink); margin-top: 18px; letter-spacing: -.01em; } .faq dd{ margin: 6px 0 14px; color: var(--ink-2); font-size: 15px; line-height: 1.65; } /* ------------------------------------------------------------ 7. APPEL À L'ACTION FINAL ------------------------------------------------------------ */ .final-cta{ margin: 56px 0 20px; padding: 40px 32px; border-radius: 24px; text-align: center; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; position: relative; overflow: hidden; } .final-cta::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.22) 0%, transparent 52%); } .final-cta h2{ color: #fff; margin: 0 0 10px; font-size: clamp(23px, 3vw, 32px); } .final-cta p{ color: rgba(255,255,255,.9); margin: 0 auto 20px; font-size: 15.5px; max-width: 540px; } .final-cta .cta{ background: #fff; color: var(--accent-strong); position: relative; } .final-cta .cta:hover{ box-shadow: 0 12px 28px -8px rgba(0,0,0,.3); } .final-cta a:not(.cta){ color: #fff; } /* Deux boutons côte à côte dans le bloc final · 10 août 2026. WhatsApp garde SA couleur, et c'est le seul endroit du site où une couleur hors palette est admise : ici elle n'habille pas, elle identifie un service que tout le monde reconnaît au premier coup d'œil. Sur fond indigo, le vert tient le contraste ; l'e-mail passe en bouton fantôme pour qu'un seul des deux attire la main. */ .cta-duo{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; position: relative; } .final-cta .cta-wa{ display: inline-flex; align-items: center; gap: 9px; background: #25D366; color: #0b3d1f; font-weight: 700; } .final-cta .cta-wa:hover{ background: #1fbe5a; box-shadow: 0 14px 30px -10px rgba(0,0,0,.35); } .final-cta .cta-mail{ background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.42); backdrop-filter: blur(4px); } .final-cta .cta-mail:hover{ background: rgba(255,255,255,.22); } @media (max-width: 520px){ .cta-duo{ flex-direction: column; } .cta-duo .cta{ width: 100%; justify-content: center; } } /* ============================================================ LA COLONNE CONTACT DU PIED DE PAGE · 10 août 2026 ------------------------------------------------------------ Première tentative : une carte blanche entre les colonnes et le copyright. Noah : « ça fait pas du tout intégré ». Il avait raison, et la raison était structurelle, un objet blanc, avec sa propre ombre, son propre bouton vert et sa propre voix, posé sur un pied de page gris fait de colonnes de liens, n empruntait RIEN au vocabulaire de l endroit où il se trouvait. Le contact est donc devenu la quatrième colonne, avec le même titre en petites majuscules et les mêmes liens gris que les trois autres. Une pastille verte a d abord précédé le lien WhatsApp. Retirée le même jour, à la demande de Noah : elle voulait signaler le service, elle faisait surtout une tache de couleur dans une colonne de liens gris. Le mot « WhatsApp » suffit à dire de quoi il s agit, et une colonne dont une seule ligne est décorée n est plus une colonne régulière. ============================================================ */ .pied-haut{ grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr; } @media (max-width: 900px){ .pied-haut{ grid-template-columns: 1fr 1fr; } } .see-also{ font-size: 13.5px; color: var(--ink-3); margin-top: 30px; } .see-also a{ margin: 0 6px; color: var(--ink-3); } .see-also a:hover{ color: var(--accent-ink); } /* ------------------------------------------------------------ 8. SOURCES ET MÉTHODE ------------------------------------------------------------ POURQUOI CE BLOC EXISTE. Ces pages avancent des chiffres sur des produits concurrents (prix, commissions). Jusqu'au 30 juillet 2026, elles ne disaient NI d'où venaient ces chiffres, NI à quelle date, NI que l'éditeur du comparatif est lui-même un concurrent cité dedans. Un assistant IA qui doit choisir quelle page citer départage sur exactement ça : une affirmation datée, dont la méthode est explicite et dont le conflit d'intérêt est déclaré, est reprise ; une affirmation sans origine est ignorée ou contredite. Déclarer qu'on est juge et partie ne nous affaiblit pas, c'est le signal qui rend le reste croyable. Ne pas le retirer. */ /* IL EST HORS DU .container, ET IL DOIT S'ALIGNER QUAND MÊME. Le bloc a été injecté par script entre `` et ``, donc à l'extérieur de la colonne de texte : sans ces largeurs il s'étalait sur toute la fenêtre pendant que le texte au-dessus restait à 880 px. `828px` = 880 moins les deux marges internes de .container ; le `calc` reproduit le même retrait sur les écrans plus étroits. */ .sources{ max-width: 828px; width: calc(100% - 2 * clamp(18px, 4vw, 26px)); margin: 44px auto 10px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; } .sources h2{ font-family: var(--ff-text); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); font-weight: 700; margin: 0 0 10px; } .sources p{ font-size: 13.5px; color: var(--ink-3); margin: 0 0 9px; line-height: 1.62; } .sources p:last-child{ margin-bottom: 0; } .sources a{ color: var(--accent-ink); } .sources time{ font-variant-numeric: tabular-nums; } .sources .sources-conflit{ padding-left: 12px; border-left: 3px solid var(--accent-soft-2); color: var(--ink-2); } /* ------------------------------------------------------------ 8 bis. L'UNIVERS D'UN CONCURRENT · bloc de maillage ------------------------------------------------------------ Ajouté le 30 juillet 2026. Le site comptait 17 pages autour de Planity, et l'inventaire a montré qu'elles ne se parlaient presque pas : logiciel-comme-planity n'avait AUCUN lien entrant éditorial, se-passer-de-planity et eviter-commission-planity un seul. Une page sans lien entrant est traitée comme secondaire par les moteurs, et un lecteur qui vient de lire « combien coûte Planity » n'avait aucun moyen d'arriver sur « comment le résilier », alors que c'est exactement sa question suivante. Le bloc regroupe l'univers par INTENTION (comprendre le coût, comparer, par métier, partir) plutôt qu'en liste plate : c'est ce qui le rend utile au lecteur, et pas seulement au robot. Il exclut toujours la page courante, un lien vers soi-même ne sert personne et brouille le maillage. */ .univers{ max-width: 828px; width: calc(100% - 2 * clamp(18px, 4vw, 26px)); margin: 44px auto 0; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; } .univers h2{ font-family: var(--ff-text); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); font-weight: 700; margin: 0 0 16px; } .univers-grille{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px 26px; } .univers-grille h3{ font-family: var(--ff-text); font-size: 13px; font-weight: 650; color: var(--ink); margin: 0 0 8px; letter-spacing: -.005em; } .univers-grille ul{ list-style: none; padding: 0; margin: 0; } .univers-grille li{ margin: 0 0 6px; font-size: 13.5px; } .univers-grille a{ color: var(--ink-3); display: inline-block; line-height: 1.45; transition: color .15s ease, transform .15s ease; } .univers-grille a:hover{ color: var(--accent-ink); transform: translateX(2px); text-decoration: none; } @media (max-width: 600px){ .univers{ padding: 20px 18px; } } /* ------------------------------------------------------------ 9. PIED DE PAGE ------------------------------------------------------------ Il tenait en une ligne de cinq liens centrés. C'est peu pour un site de plus de quatre-vingts pages : les comparatifs, le glossaire, la méthode et les avis n'étaient atteignables que depuis le corps du texte, donc invisibles à qui arrive en bas. La colonne « Transparence » réunit fondateur, méthode et avis vérifiés : c'est ce qu'un assistant IA suit en premier quand il cherche à savoir qui parle. */ .pied{ margin-top: 80px; padding: 52px 0 30px; border-top: 1px solid var(--line); background: var(--surface); } .pied-haut{ display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 38px; padding-bottom: 38px; } .pied-marque .marque{ margin-bottom: 14px; } .pied-pitch{ font-size: 14px; color: var(--ink-3); line-height: 1.62; margin: 0 0 18px; max-width: 300px; } .reseaux{ display: flex; gap: 9px; } .reseaux a{ width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--ink-3); background: var(--bg-alt); transition: transform .16s ease, color .16s ease, border-color .16s ease, background .16s ease; } .reseaux a:hover{ transform: translateY(-2px); color: #fff; background: var(--accent); border-color: var(--accent); } .pied-col h3{ font-family: var(--ff-text); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-4); margin: 0 0 14px; } .pied-col ul{ list-style: none; padding: 0; margin: 0; } .pied-col li{ margin-bottom: 9px; font-size: 14px; } .pied-col a{ font-size: 14px; color: var(--ink-3); line-height: 1.5; display: inline-block; transition: color .15s ease, transform .15s ease; } .pied-col a:hover{ color: var(--accent-ink); transform: translateX(2px); text-decoration: none; } .pied-bas{ display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-4); } .pied-bas a{ color: var(--ink-4); } .pied-bas a:hover{ color: var(--accent-ink); } .pied-bas .legaux a{ margin-left: 16px; } .pied-bas .legaux a:first-child{ margin-left: 0; } @media (max-width: 860px){ .pied-haut{ grid-template-columns: 1fr 1fr; gap: 30px; } .pied-marque{ grid-column: 1 / -1; } } @media (max-width: 520px){ .pied-haut{ grid-template-columns: 1fr; } .pied-bas{ flex-direction: column; align-items: flex-start; gap: 12px; } .pied-bas .legaux a{ margin-left: 0; margin-right: 16px; } } /* ------------------------------------------------------------ 10. TÉLÉPHONE ------------------------------------------------------------ Les tableaux défilent au lieu de déborder. Ajouté le 27 juillet 2026 après mesure : le comparatif de /rendez-vous-coiffeur sortait de 38 px hors de l'écran. `.table-wrap` a `overflow:hidden` pour ses coins arrondis, ce qui coupait la colonne de droite sans jamais permettre de la lire. */ @media (max-width: 720px){ h2{ margin-top: 36px; } .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap table{ min-width: 520px; } table{ font-size: 13.5px; } th, td{ padding: 11px 13px; } .final-cta{ padding: 32px 22px; } .sources{ padding: 18px 18px; } } /* ============================================================ AJOUT DU 25 AOÛT 2026 · les blocs « réponse » des pages à la main ============================================================ Les 127 pages générées ont ces blocs depuis ce matin, dans `pages-concurrents.css`. Les 35 pages écrites à la main, non, elles utilisent cette feuille-ci. `.reponse` existait déjà, mais RECOPIÉ EN LIGNE dans huit pages, à l'identique. C'est la façon la plus sûre de le voir diverger : on corrige une couleur dans une page, et sept gardent l'ancienne. Il vit désormais ici, une seule fois, et les huit copies inline peuvent rester sans dommage, elles disent la même chose. Les trois autres blocs sont nouveaux, et servent la même chose que leurs équivalents `pc-` : rendre la page citable par un assistant. Ils reprennent volontairement la même grammaire visuelle, pour que le site reste d'un seul tenant malgré ses deux feuilles de style. ============================================================ */ /* --- LA RÉPONSE COURTE ------------------------------------------------ Le bloc le plus important : deux à quatre phrases, autonomes, posées avant toute explication. C'est ce passage qu'un modèle recopie quand il cite la page, et c'est ce que lit un visiteur pressé. */ .reponse{ background:#F8FAFC; border:1px solid #E5E7EB; border-left:3px solid #5A50E6; border-radius:12px; padding:18px 20px; margin:22px 0 30px; } .reponse p{ margin:0; font-size:16.5px; line-height:1.62; color:#1F2937; } .reponse p + p{ margin-top:10px; } .reponse strong{ font-weight:620; color:#111827; } .reponse a{ color:#4338CA; font-weight:550; text-decoration:underline; text-underline-offset:2px; } /* Le chapeau du bloc, en petites majuscules. Il dit au lecteur, et au modèle, que ce qui suit est la réponse, pas une introduction. */ .reponse-t{ font-size:11.5px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:#4338CA; margin:0 0 8px !important; } /* --- LE SOMMAIRE ------------------------------------------------------ Des ancres vers les titres de la page. Google peut en tirer des liens de section dans ses résultats, et un lecteur arrivé d'une recherche précise saute au bon endroit plutôt que de repartir. */ .sommaire{ background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:16px 20px; margin:0 0 30px; } .sommaire > p{ font-size:11.5px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:#6B7280; margin:0 0 10px; } .sommaire ol{ margin:0; padding:0; list-style:none; display:grid; gap:7px; counter-reset:som; } .sommaire li{ counter-increment:som; font-size:14.5px; line-height:1.5; } .sommaire li::before{ content:counter(som); display:inline-grid; place-items:center; width:20px; height:20px; margin-right:9px; border-radius:6px; background:#EEF2FF; color:#4338CA; font-size:11.5px; font-weight:650; vertical-align:-3px; } .sommaire a{ color:#374151; text-decoration:none; } .sommaire a:hover{ color:#4338CA; text-decoration:underline; } /* --- LE FIL D'ARIANE VISIBLE ----------------------------------------- Il existait déjà en JSON-LD, invisible à l'écran. Le rendre visible sert le visiteur arrivé par une recherche : il voit où il est tombé, et il a une sortie vers le niveau au-dessus. */ .fil{ font-size:13px; color:#9CA3AF; margin:0 0 4px; } .fil a{ color:#6B7280; text-decoration:none; } .fil a:hover{ color:#4338CA; text-decoration:underline; } .fil span{ margin:0 7px; opacity:.55; } /* --- LA DATE DE RELECTURE --------------------------------------------- Sous le titre. Signal de fraîcheur pour les moteurs de réponse, et honnêteté de base : le lecteur sait de quand date ce qu'il lit. */ .relu{ font-size:13px; color:#9CA3AF; margin:12px 0 0; } .relu time{ color:#6B7280; font-weight:550; } /* ============================================================ LA DA « CAHIER & NUMÉRIQUE » SUR LES PAGES INDEXÉES ------------------------------------------------------------ 26 août 2026. Les 212 pages SEO chargent déjà tokens.css : la police manuscrite, les couleurs et les gestes de la DA y sont donc disponibles sans rien ajouter. Il ne restait qu’à les utiliser, et à charger Caveat Brush dans leur en-tête, ce que font maintenant les générateurs. Trois gestes seulement ici, les mêmes que sur la vitrine : · l’intertitre passe à l’écriture manuscrite ; · les filets d’un pixel deviennent un trait tiré à la main ; · le fond de page reçoit la réglure du cahier, très pâle. Rien de plus : ces pages sont là pour être LUES, souvent depuis une recherche Google, souvent en diagonale. Le décor y est un accent, jamais un événement. ============================================================ */ /* L’intertitre manuscrit · il remplace les petites capitales espacées, exactement comme sur la vitrine le 26 août. */ .eyebrow{ font-family: var(--ff-hand); font-style: italic; font-size: clamp(19px, 2vw, 25px); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1; color: var(--accent); transform: rotate(-1.6deg); transform-origin: left center; display: inline-block; margin: 0 0 12px; } /* LE TRAIT TIRÉ À LA MAIN, en image de fond · il n’y a pas de SVG à poser dans ces pages (elles sont générées, on ne veut pas y ajouter de balise), donc le tracé vit dans un data-URI. Même dessin que TraitMain côté vitrine : il hésite de deux pixels sur toute sa longueur, là où un border-top est droit au micron. */ .cb-filet-main{ border: 0 !important; height: 8px; background-repeat: no-repeat; background-size: 100% 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.4C118 2.3 262 6.4 404 4.3 546 2.2 688 6.8 830 4.5 948 2.6 1082 6.2 1198 3.2' fill='none' stroke='%235A50E6' stroke-opacity='.34' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } /* LA RÉGLURE · la même que les sections « page de cahier » de la vitrine, en plus discrète encore : ici elle passe sous du texte long, elle ne doit jamais se lire. */ .cb-reglee{ position: relative; } .cb-reglee::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( to bottom, transparent 0 37px, color-mix(in oklab, var(--accent) 20%, transparent) 37px 38px ); -webkit-mask-image: radial-gradient(92% 72% at 50% 50%, #000 0%, transparent 78%); mask-image: radial-gradient(92% 72% at 50% 50%, #000 0%, transparent 78%); opacity: .45; } .cb-reglee > *{ position: relative; } @media (prefers-reduced-motion: reduce){ .eyebrow{ transform: none; } } /* Mêmes deux gestes que sur les comparatifs · 26 août 2026. */ .pied{ border-top: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.4C118 2.3 262 6.4 404 4.3 546 2.2 688 6.8 830 4.5 948 2.6 1082 6.2 1198 3.2' fill='none' stroke='%235A50E6' stroke-opacity='.34' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: top left; background-size: 100% 8px; padding-top: 60px; } .pied-bas{ border-top: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.4C118 2.3 262 6.4 404 4.3 546 2.2 688 6.8 830 4.5 948 2.6 1082 6.2 1198 3.2' fill='none' stroke='%235A50E6' stroke-opacity='.34' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: top left; background-size: 100% 8px; padding-top: 30px; } /* ENTÊTE SIMPLIFIÉ · 11 octobre 2026 (demande de Noah) : logo à gauche ; à droite Fonctionnalités, Tarifs, Se connecter, S'inscrire. Aucune barre de séparation. */ .nav-droite{ display: flex; align-items: center; gap: 6px; } .nav-connexion{ padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--ink-3); border-radius: 999px; transition: color .15s, background .15s; white-space: nowrap; } .nav-connexion:hover{ color: var(--ink); background: var(--bg-alt); text-decoration: none; } @media (max-width: 900px){ .nav-droite .nav-liens{ display: none; } } @media (max-width: 480px){ .nav-connexion{ padding: 8px 10px; font-size: 13px; } } /* ============================================================ LOGO · 25 octobre 2026 : la nouvelle identité de Noah ------------------------------------------------------------ Le mot « clientbase » et le symbole « clb » sont ses fichiers (image/), rognés et rendus transparents par outils/genere-logos.py. Ils sont posés en MASQUE : la forme vient du PNG, la couleur vient du texte (currentColor). Résultat : un seul fichier, noir sur fond clair, blanc dès qu'on met `color:#fff` autour, sans second fichier à maintenir. ============================================================ */ .logo-mot, .logo-clb{ display: block; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; transition: transform .28s cubic-bezier(.22,1,.36,1); } .logo-mot{ height: 20px; aspect-ratio: 1400 / 240; -webkit-mask-image: url(/assets/logo/clientbase-noir.png); mask-image: url(/assets/logo/clientbase-noir.png); } .logo-clb{ height: 22px; aspect-ratio: 587 / 354; -webkit-mask-image: url(/assets/logo/clb-noir.png); mask-image: url(/assets/logo/clb-noir.png); } a:hover > .logo-mot{ transform: translateY(-1.5px); } .marque{ color: var(--ink); } @media (max-width: 720px){ .logo-mot{ height: 18px; } }