/* ==================================================================== THÈME SOMBRE DU SITE -------------------------------------------------------------------- Repeint les pages existantes — tarifs, blog, articles — dans le langage de la nouvelle page d'accueil : fond noir, rails verticaux, encarts sans arrondi, boutons gris, Segoe UI. POURQUOI UN CALQUE ET NON UNE RÉÉCRITURE. Ces pages portent du contenu réel et un balisage SEO construit sur des mois : les réécrire, c'est risquer de le perdre pour un changement de couleurs. Ici on ne touche qu'à l'apparence, et retirer une ligne suffit à tout remettre comme avant. Chargé APRÈS les feuilles des pages, d'où les `!important` : ils ne forcent pas une préférence, ils départagent deux règles de même poids dont l'ordre ne joue pas toujours en notre faveur. ==================================================================== */ :root{ --ks-fond:#000000; --ks-surface:#0B0B0B; --ks-carte:#161616; --ks-trait:#1F1F1F; --ks-bord:#2E2E2E; --ks-encre:#F2F2F3; --ks-encre-2:#A8A8AE; --ks-encre-3:#7B7B7B; --ks-bouton:#333333; --ks-marge:max(32px, calc((100% - 1600px) / 2 + 32px)); --ks-police:"Segoe UI","Segoe UI Variable Text",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; } @media (max-width:719.98px){ :root{ --ks-marge:24px; } } /* ---- Base ---- */ html, body{ background:var(--ks-fond) !important; color:var(--ks-encre) !important; } html body, html body p, html body span, html body div, html body li, html body a, html body button, html body input, html body textarea, html body select, html body label, html body td, html body th, html body small, html body strong, html body b, html body em, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body [class*="title"], html body [class*="Title"], html body [class*="-name"], html body [class*="heading"], html body [class*="Heading"]{ font-family:var(--ks-police) !important; } /* ---- Les rails, sans ajouter de balise ---- Posés sur plutôt que sur : les pages du site utilisent déjà body::before pour leurs propres décors. */ html::before, html::after{ content:""; position:fixed; top:0; bottom:0; border-left:1px dashed var(--ks-trait); z-index:1; pointer-events:none; } html::before{ left:var(--ks-marge); } html::after{ right:var(--ks-marge); } @media (max-width:719.98px){ html::before, html::after{ display:none; } } /* ---- Surfaces ---- */ html body section, html body main, html body article, html body .ktPlans, html body .ktCompare, html body .ktServ, html body .ktPlan, html body .ktServCard, html body .ktCompareTable__thead, html body .gfModale, html body .bp-lang-panel, html body .bp-lang-body, html body .bp-lang-header, html body .proLoginSheet, html body .ktNavMega{ background:var(--ks-fond) !important; } html body .ktServCard, html body .gfModale__img, html body .bp-lang-item, html body .proLoginSheet__input, html body input, html body textarea, html body select{ background:var(--ks-carte) !important; color:var(--ks-encre) !important; } /* ---- Traits et angles ---- */ html body .ktPlan, html body .ktServCard, html body .ktCompareTable__thead, html body .gfModale, html body .bp-lang-panel, html body .proLoginSheet, html body .ktNavMega, html body [class*="card"], html body [class*="Card"]{ border-color:var(--ks-bord) !important; border-radius:0 !important; } html body [class*="__cta"], html body [class*="btn"], html body [class*="Btn"], html body button, html body .ktPlan__cta{ border-radius:4px !important; } /* ---- Encre ---- */ html body h1, html body h2, html body h3, html body h4, html body [class*="__h"], html body [class*="title"], html body [class*="Title"]{ color:var(--ks-encre) !important; } html body p, html body li, html body td, html body dd, html body [class*="__sub"], html body [class*="__desc"], html body [class*="lead"]{ color:var(--ks-encre-2) !important; } html body small, html body [class*="__meta"], html body [class*="eyebrow"], html body [class*="__kicker"]{ color:var(--ks-encre-3) !important; } /* ---- Boutons : gris plein, ou contour ---- */ html body .ktPlan__cta, html body [class*="__cta"], html body .btn, html body [class*="-btn"], html body [class*="__btn"]{ background:var(--ks-bouton) !important; color:#FFFFFF !important; border-color:var(--ks-bouton) !important; } html body [class*="ghost"], html body [class*="outline"], html body [class*="--sec"]{ background:transparent !important; color:var(--ks-encre) !important; border:1px solid var(--ks-bord) !important; } /* ---- Ce qui garde sa couleur : les marqueurs de sens ---- */ html body .ktCheck{ background:#15803D !important; color:#FFFFFF !important; } html body [class*="badge"], html body [class*="Badge"]{ border-radius:4px !important; } /* ---- Séparateurs ---- */ html body hr, html body [class*="__sep"], html body [class*="divider"]{ border-color:var(--ks-trait) !important; background:var(--ks-trait) !important; } html body [style*="background:#fff"], html body [style*="background: #fff"], html body [style*="background:#FFF"], html body [style*="background:#ffffff"]{ background:var(--ks-fond) !important; } /* ---- Les prix reprennent l'encre forte ---- La règle générique sur les paragraphes les avait passés en secondaire ; or c'est l'information principale d'une page de tarifs. */ html body [class*="price"], html body [class*="Price"], html body [class*="__amount"], html body [class*="__val"], html body [class*="tarif"]{ color:var(--ks-encre) !important; } html body [class*="price"] [class*="unit"], html body [class*="price"] small{ color:var(--ks-encre-3) !important; } /* ==================================================================== LE BLOG ET LES ARTICLES Les classes relevées sur les pages rendues, pas devinées : vignettes, pastilles de catégorie, panneaux de connexion et de langue. ==================================================================== */ html body .bpCard__media, html body .bpFeatured__media{ background:var(--ks-surface) !important; border:1px solid var(--ks-trait) !important; border-radius:0 !important; } html body .bpCard, html body .bpFeatured, html body .bpCard__body{ background:transparent !important; border-radius:0 !important; } html body .bpCats__item{ background:transparent !important; color:var(--ks-encre-2) !important; border:1px solid var(--ks-bord) !important; border-radius:4px !important; } html body .bpCats__item:hover{ background:var(--ks-carte) !important; color:var(--ks-encre) !important; } html body .bpCats__item.is-active, html body .bpCats__item[aria-current]{ background:var(--ks-bouton) !important; border-color:var(--ks-bouton) !important; color:#FFFFFF !important; } /* Les panneaux qui se superposent à la page : connexion, langue. */ html body .bp-login-panel, html body .bp-login-body, html body .bp-login-header, html body .bp-login-google, html body .bp-login-pro, html body .bp-login-close, html body .bp-lang-close, html body .bp-lang-itemCode{ background:var(--ks-fond) !important; color:var(--ks-encre) !important; border-color:var(--ks-bord) !important; } html body .bp-login-google, html body .bp-login-pro, html body .bp-lang-itemCode{ background:var(--ks-carte) !important; } /* Le bandeau translucide du blog : opaque et noir, comme ailleurs. */ html body header[class=""], html body > header{ background:var(--ks-fond) !important; border-bottom:1px solid var(--ks-bord) !important; } /* Le corps d'un article : largeur de lecture et encre lisible. */ html body .bpArticle, html body .bpArticle__body, html body .prose{ background:transparent !important; color:var(--ks-encre-2) !important; } html body .bpArticle h2, html body .bpArticle h3, html body .prose h2, html body .prose h3{ color:var(--ks-encre) !important; } html body blockquote{ border-left:3px solid var(--ks-bouton) !important; background:transparent !important; color:var(--ks-encre-2) !important; } html body table th, html body table td{ border-color:var(--ks-trait) !important; } html body img{ border-radius:0 !important; } /* ==================================================================== LE BANDEAU DU BLOG Le blog passe par layout_top_desktop.php, un autre fichier que l'en-tête des pages pro : il rend bien `#bpTopHeader`, mais sans les règles `is-dark-bg` qui le font basculer au noir. On les redonne ici. ==================================================================== */ html body #bpTopHeader, html body #bpTopHeader.is-top, html body #bpTopHeader.is-top-overlay, html body #proMobileTopBar, html body #proMobileTopBar.is-top{ background:var(--ks-fond) !important; border-bottom:1px solid var(--ks-bord) !important; } html body #bpTopHeader .bpTopHeader-logo, html body #bpTopHeader .bpTopHeader-logoText, html body #bpTopHeader .bpTopHeader-link, html body #bpTopHeader .bpTopHeader-signin, html body #bpTopHeader .bpTopHeader-langBtn, html body #proMobileTopBar .ptop-logoText, html body #proMobileTopBar .ptop-lang, html body #proMobileTopBar .ptop-burger{ color:var(--ks-encre) !important; } html body #bpTopHeader .bpTopHeader-link:hover{ background:rgba(255,255,255,.08) !important; } html body #bpTopHeader .bpTopHeader-badge{ color:var(--ks-encre) !important; border-color:var(--ks-bord) !important; } html body #bpTopHeader .bpTopHeader-cta, html body #proMobileTopBar .ptop-login{ background:var(--ks-bouton) !important; color:#FFFFFF !important; border-radius:4px !important; } /* ---- Les vignettes sans image ---- Le blog les remplit d'un dégradé clair (#EEE → #DDD) écrit dans sa propre feuille. Sur fond noir, c'étaient des rectangles blancs. */ html body .bpFeatured__noimg, html body .bpCard__noimg, html body [class*="__noimg"]{ background:var(--ks-surface) !important; border:1px solid var(--ks-trait) !important; } /* Le blog nomme ses entrées de menu autrement que les pages pro : plutôt que de deviner ses classes, on éclaircit tout ce qui porte du texte dans le bandeau, et on laisse au bouton d'appel sa couleur propre. */ html body #bpTopHeader a, html body #bpTopHeader button, html body #bpTopHeader span, html body #proMobileTopBar a, html body #proMobileTopBar button, html body #proMobileTopBar span{ color:var(--ks-encre) !important; } html body #bpTopHeader .bpTopHeader-cta, html body #bpTopHeader .bpTopHeader-cta *, html body #proMobileTopBar .ptop-login, html body #proMobileTopBar .ptop-login *{ color:#FFFFFF !important; } /* Encore une question de poids : les entrées du bandeau sont visées par `#bpTopHeader .bpTopHeader-link`, soit un identifiant ET une classe. Mon sélecteur n'avait que l'identifiant et perdait. `[class]` rétablit l'équilibre sans avoir à nommer chaque classe du blog. */ html body #bpTopHeader a[class], html body #bpTopHeader button[class], html body #bpTopHeader span[class], html body #proMobileTopBar a[class], html body #proMobileTopBar button[class], html body #proMobileTopBar span[class]{ color:var(--ks-encre) !important; } html body #bpTopHeader .bpTopHeader-cta[class], html body #proMobileTopBar .ptop-login[class]{ color:#FFFFFF !important; } /* Troisième et dernier cran : la règle gagnante est `#bpTopHeader.is-top .bpTopHeader-link`, soit un identifiant et deux classes. On ajoute `[class]` des deux côtés pour passer devant, sans avoir à connaître l'état exact du bandeau. */ html body #bpTopHeader[class] a[class], html body #bpTopHeader[class] button[class], html body #bpTopHeader[class] span[class], html body #proMobileTopBar[class] a[class], html body #proMobileTopBar[class] button[class], html body #proMobileTopBar[class] span[class]{ color:var(--ks-encre) !important; } html body #bpTopHeader[class] .bpTopHeader-cta[class], html body #bpTopHeader[class] .bpTopHeader-cta[class] *, html body #proMobileTopBar[class] .ptop-login[class]{ color:#FFFFFF !important; } /* ==================================================================== LE BANDEAU, IDENTIQUE SUR TOUTES LES PAGES Ces règles vivaient dans le bas de page de l'accueil : seule l'accueil en profitait. Ici, toute page qui charge le thème a le même en-tête — accueil, tarifs, blog, articles, centre d'aide. ==================================================================== */ /* Le trait sous le bandeau. Il faut battre `body.is-dark-bg #bpTopHeader.is-top{ border-bottom:0 !important }`, qui vaut (1,2,1) : on reprend sa classe et on ajoute `html` puis `[class]`, ce qui donne (1,2,2). Deux essais plus faibles ont été ignorés en silence avant de mesurer qui gagnait. */ html body.is-dark-bg #bpTopHeader[class], html body.is-dark-bg #proMobileTopBar[class]{ border-bottom:1px solid #2E2E2E !important; } /* La cale posée par l'inclusion mesure 100 px alors que le bandeau n'en fait que 64 : 36 px de vide sous l'en-tête. Invisible sur fond noir, mais c'est de l'espace en trop au-dessus du titre. */ html body.is-dark-bg .bpHeaderSpacer{ height:64px !important; } /* Disposition du bandeau, sur cette page seulement. Le logo était centré en `position:absolute` ; on le remet dans le flux et on donne l'ordre voulu aux trois blocs. La nav prend l'espace restant et se centre dedans : elle reste au milieu même si le bloc de droite change de largeur. */ html body.is-dark-bg #bpTopHeader .bpTopHeader-center{ position:static !important; transform:none !important; order:-1 !important; pointer-events:auto !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; flex:1 1 0 !important; } html body.is-dark-bg #bpTopHeader .bpTopHeader-left{ order:0 !important; flex:0 0 auto !important; justify-content:center !important; display:flex !important; } html body.is-dark-bg #bpTopHeader .bpTopHeader-right{ order:1 !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; flex:1 1 0 !important; } /* Cinq pixels entre le contenu du bandeau et chacun des deux rails. */ html body.is-dark-bg #bpTopHeader .bpTopHeader-inner{ padding-left:37px !important; padding-right:37px !important; } html body.is-dark-bg #proMobileTopBar .ptop-wrap{ padding-left:29px !important; padding-right:29px !important; } @media (max-width:767.98px){ html body.is-dark-bg #bpTopHeader .bpTopHeader-inner{ padding-left:29px !important; padding-right:29px !important; } } html body.is-dark-bg #bpTopHeader .bpTopHeader-logo{ gap:9px !important; } /* La marque en casse normale. Les capitales viennent de la feuille de typographie du site (`text-transform:uppercase !important` sur .bpTopHeader-logoText) : il faut un sélecteur plus fort, pas seulement une déclaration plus tardive. */ html body.is-dark-bg #bpTopHeader .bpTopHeader-logoText{ font-size:18px !important; color:#FFFFFF !important; text-transform:none !important; letter-spacing:-.03em !important; font-family:var(--police) !important; font-weight:600 !important; } html body.is-dark-bg #bpTopHeader .bpTopHeader-logoImg{ height:15px !important; } html body.is-dark-bg #proMobileTopBar .ptop-logoText{ font-size:16px !important; text-transform:none !important; letter-spacing:-.03em !important; font-family:var(--police) !important; font-weight:600 !important; } html body.is-dark-bg #proMobileTopBar .ptop-logoImg{ height:14px !important; } /* Les boutons de l'en-tête et du pied de page passent eux aussi à 4 px, SUR CETTE PAGE SEULEMENT : ce sont des inclusions partagées, et un rayon changé dans le fichier aurait redessiné tous les boutons du site en ligne. Le reste de koatcher.com garde ses pastilles. */ html body.is-dark-bg #bpTopHeader .bpTopHeader-cta, html body.is-dark-bg #bpTopHeader .bpTopHeader-signin, html body.is-dark-bg #bpTopHeader .bpTopHeader-langBtn, html body.is-dark-bg #proMobileTopBar .ptop-login, html body.is-dark-bg #proMobileTopBar .ptop-lang, html body.is-dark-bg #proMobileTopBar .ptop-burger{ border-radius:4px !important; padding-top:7px !important; padding-bottom:7px !important; height:auto !important; min-height:0 !important; } /* Le bouton du bandeau était le dernier blanc de la page. */ html body.is-dark-bg #bpTopHeader .bpTopHeader-cta, html body.is-dark-bg #proMobileTopBar .ptop-login{ background:#333333 !important; color:#FFFFFF !important; border-color:#333333 !important; } html body.is-dark-bg #bpTopHeader .bpTopHeader-cta:hover, html body.is-dark-bg #proMobileTopBar .ptop-login:hover{ background:#3F3F3F !important; } /* ==================================================================== LE COMPARATIF DES FORFAITS Ses 79 libellés étaient écrits en #0A0A0B — l'encre du site, prévue pour un fond blanc. Sur noir, ils étaient invisibles. Chaque classe a été relevée sur la page rendue, pas devinée. ==================================================================== */ html body .ktCompare, html body .ktCompareSection, html body .ktCompareTable__thLabel, html body .ktCompareTable__thName, html body .ktCompareRow__label, html body .ktCompareRow__cell, html body .ktCompareTable__thead, html body .ktCompareTable__row{ color:var(--ks-encre) !important; } html body .ktCompareRow__cell{ color:var(--ks-encre-2) !important; } html body .ktCompareSection{ color:var(--ks-encre-3) !important; } html body .ktCompareTable__thBtn{ background:var(--ks-bouton) !important; color:#FFFFFF !important; border:1px solid var(--ks-bouton) !important; border-radius:4px !important; } html body .ktCompareRow, html body .ktCompareTable__row, html body .ktCompareTable__thead{ border-color:var(--ks-trait) !important; } /* ==================================================================== LES ENTRÉES DE NAVIGATION, PLUS DISCRÈTES Le fichier d'en-tête les redimensionne dans trois requêtes média en `!important` (16 / 14,5 / 13,5 px selon la largeur). Pour passer devant sans rouvrir ce fichier partagé, on ajoute `[class]` : la règle vaut alors un identifiant et deux classes, contre une chez elles. ==================================================================== */ html body #bpTopHeader[class] .bpTopHeader-nav > *{ font-size:13.5px !important; font-weight:400 !important; letter-spacing:-.005em !important; padding-left:13px !important; padding-right:13px !important; } @media (max-width:1100px){ html body #bpTopHeader[class] .bpTopHeader-nav > *{ font-size:12.5px !important; padding-left:9px !important; padding-right:9px !important; } } /* ==================================================================== LES CARTES DE FORFAIT SE TOUCHENT, ET TOUCHENT LES RAILS -------------------------------------------------------------------- La grille était centrée dans 1600 px avec 18 px entre les cartes : elle s'arrêtait 32 px avant les rails et chaque carte flottait seule. MARGE PLUTÔT QUE RETRAIT : avec `margin-inline`, ce sont les bords de la grille qui viennent se poser sur les rails, donc sa bordure les suit. Un `padding` aurait rentré le contenu en laissant le cadre à l'écart. ==================================================================== */ html body .ktPlans__grid{ grid-template-columns:repeat(4, 1fr) !important; gap:0 !important; max-width:none !important; width:auto !important; margin-left:var(--ks-marge) !important; margin-right:var(--ks-marge) !important; border:1px solid var(--ks-bord) !important; } html body .ktPlans__grid > .ktPlan{ border:0 !important; border-left:1px solid var(--ks-bord) !important; border-radius:0 !important; margin:0 !important; transform:none !important; } html body .ktPlans__grid > .ktPlan:first-child{ border-left:0 !important; } @media (max-width:1100px){ html body .ktPlans__grid{ grid-template-columns:repeat(2, 1fr) !important; } html body .ktPlans__grid > .ktPlan:nth-child(odd){ border-left:0 !important; } html body .ktPlans__grid > .ktPlan:nth-child(n+3){ border-top:1px solid var(--ks-bord) !important; } } @media (max-width:700px){ html body .ktPlans__grid{ grid-template-columns:1fr !important; } html body .ktPlans__grid > .ktPlan{ border-left:0 !important; } html body .ktPlans__grid > .ktPlan + .ktPlan{ border-top:1px solid var(--ks-bord) !important; } } /* ==================================================================== SURVOL DES LIENS DU BANDEAU : LA COULEUR SEULE Le fichier d'en-tête pose une pastille translucide sous l'entrée survolée. On la retire : seul le texte s'éclaircit, ce qui suffit à signaler la cible sans ajouter de forme. ==================================================================== */ html body #bpTopHeader[class] .bpTopHeader-nav > *:hover, html body #bpTopHeader[class] .bpTopHeader-nav > *:focus-visible, html body #bpTopHeader[class] .bpTopHeader-link:hover, html body #bpTopHeader[class] .bpTopHeader-link.is-active{ background:transparent !important; box-shadow:none !important; outline:none !important; color:var(--ks-encre-2) !important; transition:color .18s ease !important; } /* Le trait que certaines entrées actives affichent sous elles. */ html body #bpTopHeader[class] .bpTopHeader-link::after, html body #bpTopHeader[class] .bpTopHeader-link.is-active::after{ display:none !important; } html body #bpTopHeader[class] .bpTopHeader-signin:hover, html body #bpTopHeader[class] .bpTopHeader-langBtn:hover{ background:transparent !important; color:var(--ks-encre-2) !important; } /* ==================================================================== LE BLOG : DES CARTES QUI SE TOUCHENT -------------------------------------------------------------------- La grille laissait 56 px entre les rangées et 32 px entre les colonnes, chaque article flottant seul. On passe au même principe que le reste du site : bordures partagées, aucun espacement, et le cadre qui va d'un rail à l'autre. L'IMAGE SORT DU RETRAIT DE LA CARTE. C'est la carte qui perd son rembourrage, et le titre et la date qui reçoivent le leur : l'image occupe alors toute la largeur du cadre sans qu'on ait à la tirer par des marges négatives, qui se décalent d'un pixel dès que le rembourrage change. L'article en vedette garde sa mise en page — c'est le « sauf le premier » : son image est à côté du texte, pas au-dessus. ==================================================================== */ html body .bpGrid{ gap:0 !important; max-width:none !important; width:auto !important; margin-left:var(--ks-marge) !important; margin-right:var(--ks-marge) !important; border:1px solid var(--ks-bord) !important; border-bottom:0 !important; } html body .bpGrid > .bpCard{ border:0 !important; border-left:1px solid var(--ks-bord) !important; border-bottom:1px solid var(--ks-bord) !important; border-radius:0 !important; padding:0 0 22px !important; margin:0 !important; display:flex !important; flex-direction:column !important; } html body .bpGrid > .bpCard:nth-child(3n+1){ border-left:0 !important; } /* L'image : pleine largeur, collée en haut du cadre. */ html body .bpGrid > .bpCard .bpCard__media{ width:100% !important; margin:0 0 18px !important; border:0 !important; border-bottom:1px solid var(--ks-trait) !important; border-radius:0 !important; height:210px !important; } html body .bpGrid > .bpCard .bpCard__media img{ width:100% !important; height:100% !important; object-fit:cover !important; } /* Le texte, lui, rentre. */ html body .bpGrid > .bpCard .bpCard__title, html body .bpGrid > .bpCard .bpCard__date, html body .bpGrid > .bpCard .bpCard__excerpt{ padding-left:20px !important; padding-right:20px !important; } html body .bpGrid > .bpCard .bpCard__date{ margin-top:auto !important; padding-top:12px !important; } @media (max-width:1000px){ html body .bpGrid{ grid-template-columns:repeat(2, 1fr) !important; } html body .bpGrid > .bpCard{ border-left:1px solid var(--ks-bord) !important; } html body .bpGrid > .bpCard:nth-child(2n+1){ border-left:0 !important; } } @media (max-width:719.98px){ html body .bpGrid{ grid-template-columns:1fr !important; } html body .bpGrid > .bpCard{ border-left:0 !important; } } /* ---- Les rails sur téléphone ---- Ils étaient masqués sous 720 px ; la trame s'arrêtait donc au bord de l'écran. On les rétablit, au retrait du téléphone. */ @media (max-width:719.98px){ html::before, html::after{ display:block !important; } } /* La grille se cale sur les rails par son conteneur, pas par sa marge. `.bpAllInner` tient déjà les 1600 px centrés ; il lui manquait le bon retrait — 32 px, la valeur des rails — et ma marge s'ajoutait au sien, d'où 127 px au lieu de 87. On règle le conteneur, la grille suit. */ html body .bpAllInner{ padding-left:32px !important; padding-right:32px !important; } html body .bpGrid{ margin-left:0 !important; margin-right:0 !important; } @media (max-width:719.98px){ html body .bpAllInner{ padding-left:24px !important; padding-right:24px !important; } } /* ---- L'article en vedette : son image commence au rail ---- Son conteneur (`.bpHeroInner`) garde 40 px de retrait, comme la grille gardait les siens : l'image s'arrêtait donc 8 px après la ligne. On ramène ce conteneur au même retrait que les rails, et l'image vient s'y poser d'elle-même. */ html body .bpHeroInner{ padding-left:32px !important; padding-right:32px !important; } @media (max-width:719.98px){ html body .bpHeroInner{ padding-left:24px !important; padding-right:24px !important; } } html body .bpFeatured__media{ margin-left:0 !important; border-radius:0 !important; } /* Le bouton « Login » de la barre mobile ressortait blanc sur blanc : texte éclairci par le thème, fond resté clair parce que la règle d'origine était plus spécifique. On reprend les deux ensemble, avec le même poids que ce qui le peignait. */ html body #proMobileTopBar[class] .ptop-login[class]{ background:var(--ks-bouton) !important; color:#FFFFFF !important; border:1px solid var(--ks-bouton) !important; border-radius:4px !important; } /* ==================================================================== TARIFS SUR TÉLÉPHONE : UNE COLONNE, PAS UN CARROUSEL -------------------------------------------------------------------- Sous 720 px, la page passait la grille en `display:flex` avec `overflow-x:auto` et un calage par à-coups : les quatre forfaits défilaient latéralement, débordaient des rails et perdaient leurs bordures au passage. On rétablit une vraie grille d'une colonne. Il faut défaire les quatre propriétés du carrousel, pas seulement le nombre de colonnes — laisser `overflow-x:auto` suffirait à garder une zone qui glisse. ==================================================================== */ @media (max-width:719.98px){ html body .ktPlans__grid{ display:grid !important; grid-template-columns:1fr !important; grid-auto-flow:row !important; overflow:visible !important; scroll-snap-type:none !important; gap:0 !important; width:auto !important; max-width:none !important; padding:0 !important; margin-left:var(--ks-marge) !important; margin-right:var(--ks-marge) !important; border:1px solid var(--ks-bord) !important; } html body .ktPlans__grid > .ktPlan{ flex:none !important; width:auto !important; min-width:0 !important; max-width:none !important; margin:0 !important; scroll-snap-align:none !important; border:0 !important; border-top:1px solid var(--ks-bord) !important; border-radius:0 !important; transform:none !important; } html body .ktPlans__grid > .ktPlan:first-child{ border-top:0 !important; } } /* ==================================================================== LA BARRE MOBILE SUR LES FICHES DE PROFESSIONNEL Ces pages ouvrent sur une photo et posent `is-hero-top` : la barre devient transparente pour flotter dessus. Sur le nouveau fond, elle flottait au-dessus de blanc, logo blanc compris — donc illisible. On la rend opaque comme partout ailleurs. ==================================================================== */ html body[class] #proMobileTopBar[class], html body.is-hero-top #proMobileTopBar[class], html body[class] #bpTopHeader[class]{ background:var(--ks-fond) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-bottom:1px solid var(--ks-bord) !important; } /* ==================================================================== TARIFS SUR TÉLÉPHONE : LES CARTES ENTRE LES DEUX RAILS Ma marge précédente perdait contre une règle plus spécifique de la page ; la grille repartait du bord de l'écran. On reprend le même poids qu'elle — la classe du conteneur en plus. ==================================================================== */ @media (max-width:719.98px){ html body .ktPlans .ktPlans__grid, html body section.ktPlans .ktPlans__grid, html body .ktPlans__grid[class]{ margin-left:var(--ks-marge) !important; margin-right:var(--ks-marge) !important; padding-left:0 !important; padding-right:0 !important; width:auto !important; } /* Les cartes remplissent le cadre : leur retrait interne reste, leur marge propre disparaît. */ html body .ktPlans__grid[class] > .ktPlan[class]{ margin-left:0 !important; margin-right:0 !important; width:auto !important; } } /* Même histoire que sur le blog : la section porte son propre retrait, qui s'ajoutait à la marge de la grille — 16 + 24 = 40 px au lieu de 24. On remet la section à zéro, la marge de la grille fait seule le travail. */ @media (max-width:719.98px){ html body section.ktPlans[class]{ padding-left:0 !important; padding-right:0 !important; } } /* La barre des fiches résiste : son état `is-top-overlay` la met en transparent, et ma règle précédente n'était pas assez lourde. On nomme l'état explicitement et on répète `[class]` — chaque occurrence ajoute un cran, sans avoir à inventer un sélecteur artificiel. */ html body[class] #proMobileTopBar[class][class].is-top-overlay, html body[class] #proMobileTopBar[class][class].is-top, html body[class] #bpTopHeader[class][class].is-top-overlay, html body[class] #bpTopHeader[class][class].is-top{ background:var(--ks-fond) !important; border-bottom:1px solid var(--ks-bord) !important; } /* ==================================================================== LE COMPARATIF SUR TÉLÉPHONE Son en-tête reste collé en haut pendant le défilement, et il gardait son fond blanc : les noms de forfait et les boutons s'y détachaient mal, et la bande jurait sur la page noire. ==================================================================== */ html body .ktCompareTable__thead[class], html body .ktCompareTable__thRow[class], html body .ktCompareTable__th[class]{ background:var(--ks-fond) !important; } html body .ktCompareTable__thead[class]::after{ background:var(--ks-trait) !important; } html body .ktCompareTable__thLabel[class], html body .ktCompareTable__thName[class]{ color:var(--ks-encre) !important; } /* Les liens et boutons du comparatif : gris plein, texte blanc. */ html body .ktCompareTable__thBtn[class]{ background:var(--ks-bouton) !important; color:#FFFFFF !important; border:1px solid var(--ks-bouton) !important; border-radius:4px !important; } html body .ktCompareTable__thBtn[class]:hover{ background:#3F3F46 !important; } html body .ktCompareSection[class]{ color:var(--ks-encre-3) !important; background:var(--ks-fond) !important; } /* ==================================================================== LA TYPOGRAPHIE DES TITRES, PARTOUT -------------------------------------------------------------------- Le corps de texte était bien en Segoe UI, mais pas les titres : la feuille du site impose Google Sans sur `html body h1…h6` en `!important`, avec exactement le même poids que ma règle — et elle est chargée depuis le , donc après. À égalité, c'est la dernière qui gagne. `:not(#\9)` ajoute le poids d'un identifiant sans viser quoi que ce soit de réel : aucun élément ne porte cet identifiant, la règle s'applique donc à tous les titres, mais avec un cran de plus. C'est le moyen le plus court de passer devant sans toucher au fichier partagé. ==================================================================== */ html body h1:not(#\9), html body h2:not(#\9), html body h3:not(#\9), html body h4:not(#\9), html body h5:not(#\9), html body h6:not(#\9), html body [class*="title"]:not(#\9), html body [class*="Title"]:not(#\9){ font-family:var(--ks-police) !important; } /* ==================================================================== LES ARTICLES -------------------------------------------------------------------- Repris de vos captures : sommaire à gauche derrière un trait vertical, entrée courante en blanc avec son repère, colonne de lecture à droite, titres généreux et texte clair. ==================================================================== */ html body .bpArticleGrid{ gap:0 !important; } /* ---- Le sommaire ---- */ html body .bpToc{ border-right:1px solid var(--ks-bord) !important; padding-right:28px !important; } html body .bpTocCard{ background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; } html body .bpToc a{ display:block !important; padding:9px 0 9px 14px !important; border-left:2px solid transparent !important; color:var(--ks-encre-2) !important; font-size:14px !important; line-height:1.45 !important; text-decoration:none !important; transition:color .18s ease, border-color .18s ease !important; } html body .bpToc a:hover{ color:var(--ks-encre) !important; } html body .bpToc a.is-active, html body .bpToc .is-active > a, html body .bpToc li.is-active a{ color:var(--ks-encre) !important; border-left-color:var(--ks-encre) !important; } /* Les sous-entrées, décalées comme sur la capture. */ html body .bpToc ul ul a{ padding-left:32px !important; font-size:13.5px !important; } html body .bpToc ul{ list-style:none !important; margin:0 !important; padding:0 !important; } /* ---- Le corps ---- */ html body .content{ padding-left:56px !important; } html body .content h1{ font-size:clamp(34px, 3.4vw, 52px) !important; line-height:1.06 !important; letter-spacing:-.03em !important; color:var(--ks-encre) !important; margin-bottom:28px !important; } html body .content h2{ font-size:clamp(26px, 2.6vw, 40px) !important; line-height:1.12 !important; letter-spacing:-.025em !important; color:var(--ks-encre) !important; margin:56px 0 18px !important; } html body .content h3{ font-size:20px !important; letter-spacing:-.02em !important; color:var(--ks-encre) !important; margin:34px 0 12px !important; } html body .content p, html body .content li{ font-size:17.5px !important; line-height:1.72 !important; color:#C9C9CE !important; } html body .content p{ margin:0 0 20px !important; } /* ==================================================================== LE TEXTE FONCÉ SUR FOND NOIR Relevé sur la page rendue : les ``, les liens du corps et le « Tout voir » des articles proches étaient écrits en #1D1D1F, l'encre du site prévue pour un fond blanc. ==================================================================== */ html body .content strong, html body .content b, html body strong:not(#\9), html body b:not(#\9){ color:var(--ks-encre) !important; } html body .content a:not(#\9){ color:#7AA2FF !important; text-decoration:underline !important; text-underline-offset:3px !important; } html body .bpProches__tout:not(#\9), html body [class*="__tout"]:not(#\9){ color:var(--ks-encre-2) !important; } html body .bpProcheCard, html body [class*="ProcheCard"]{ background:var(--ks-fond) !important; border:1px solid var(--ks-bord) !important; border-radius:0 !important; } html body .bpProcheCard__titre{ color:var(--ks-encre) !important; } html body .bpProcheCard__extrait{ color:var(--ks-encre-2) !important; } @media (max-width:1000px){ html body .bpToc{ border-right:0 !important; padding-right:0 !important; } html body .content{ padding-left:0 !important; } } /* Deux encarts clairs restaient, avec du texte blanc dessus — donc illisibles. Relevés en remontant la chaîne des fonds depuis le texte, pas en parcourant la feuille : c'est le rendu qui dit la vérité. · le repère de section actif du sommaire, en gris très clair ; · l'encart « Ajouter Koatcher » du corps d'article, en blanc pur. */ html body .bpTocH2Link:not(#\9){ background:var(--ks-carte) !important; color:var(--ks-encre) !important; border-radius:4px !important; } html body .bpGoogPref__int:not(#\9), html body [class*="GoogPref"]:not(#\9){ background:var(--ks-fond) !important; border:1px solid var(--ks-bord) !important; border-radius:0 !important; color:var(--ks-encre-2) !important; } html body [class*="GoogPref"] strong{ color:var(--ks-encre) !important; } /* Dernier fond blanc de l'article : la liste des questions fréquentes. */ html body [class*="bpFaq"]:not(#\9){ background:var(--ks-fond) !important; border-color:var(--ks-bord) !important; border-radius:0 !important; } html body .bpFaq__item:not(#\9){ border-bottom:1px solid var(--ks-trait) !important; } html body .bpFaq__q:not(#\9){ color:var(--ks-encre) !important; } html body .bpFaq__r:not(#\9), html body .bpFaq__r p{ color:var(--ks-encre-2) !important; } /* ==================================================================== LES TROIS FORFAITS — MAQUETTE FOURNIE -------------------------------------------------------------------- Trois colonnes qui partagent leurs bordures, d'un rail à l'autre. Chaque carte : nom (et son repère « Populaire »), prix, interrupteur de périodicité, description, liste à coches, bouton en bas. LE BOUTON EST POUSSÉ EN BAS PAR `margin-top:auto` : les descriptions n'ont pas la même longueur, et un bouton qui flotte à trois hauteurs différentes se remarque tout de suite. ==================================================================== */ html body .ktTrio{ background:var(--ks-fond); padding:0 0 80px; } html body .ktTrio__grille{ display:grid; grid-template-columns:repeat(3, 1fr); margin-left:var(--ks-marge); margin-right:var(--ks-marge); border:1px solid var(--ks-bord); } html body .ktTrio__carte{ display:flex; flex-direction:column; padding:34px 32px 32px; border-left:1px solid var(--ks-bord); min-width:0; } html body .ktTrio__grille > .ktTrio__carte:first-child{ border-left:0; } html body .ktTrio__nom{ display:flex; align-items:center; gap:12px; margin:0; font-size:26px !important; font-weight:600 !important; letter-spacing:-.025em !important; color:var(--ks-encre) !important; } html body .ktTrio__badge{ font-size:12px; font-weight:400; color:var(--ks-encre-2); border:1px solid var(--ks-bord); border-radius:999px; padding:4px 11px; } html body .ktTrio__prix{ margin:16px 0 0 !important; color:var(--ks-encre) !important; } html body .ktTrio__prix strong{ font-size:26px; font-weight:500; color:var(--ks-encre) !important; } html body .ktTrio__prix span{ font-size:19px; color:var(--ks-encre-3) !important; } /* L'interrupteur : une piste et une pastille, sans dépendre du rendu natif de la case, qui diffère d'un navigateur à l'autre. */ html body .ktTrio__bascule{ display:inline-flex; align-items:center; gap:12px; margin-top:14px; cursor:pointer; user-select:none; } html body .ktTrio__case{ position:absolute; opacity:0; width:0; height:0; } html body .ktTrio__piste{ width:46px; height:26px; flex:0 0 auto; background:#3F3F46; border-radius:999px; position:relative; transition:background .2s ease; } html body .ktTrio__piste i{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#FFFFFF; transition:transform .2s ease; } html body .ktTrio__case:checked + .ktTrio__piste{ background:var(--ks-encre); } html body .ktTrio__case:checked + .ktTrio__piste i{ transform:translateX(20px); background:#111; } html body .ktTrio__case:focus-visible + .ktTrio__piste{ outline:2px solid var(--ks-encre-2); outline-offset:2px; } html body .ktTrio__mot{ font-size:15px; color:var(--ks-encre) !important; } html body .ktTrio__note{ margin:16px 0 0 !important; font-size:15px; color:var(--ks-encre-3) !important; } html body .ktTrio__resume{ margin:26px 0 0 !important; font-size:15.5px !important; line-height:1.6 !important; color:var(--ks-encre-2) !important; } html body .ktTrio__liste{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; } html body .ktTrio__liste li{ display:flex; align-items:flex-start; gap:11px; font-size:15px !important; line-height:1.45 !important; color:var(--ks-encre) !important; } html body .ktTrio__liste svg{ width:19px; height:19px; flex:0 0 auto; margin-top:1px; } html body .ktTrio__liste svg circle{ fill:#FFFFFF; } html body .ktTrio__liste svg path{ stroke:#000000; } html body .ktTrio__action{ margin-top:auto; display:block; text-align:center; padding:15px 18px; border:1px solid var(--ks-bord); border-radius:6px; color:var(--ks-encre) !important; font-size:15.5px; background:transparent; transition:background .18s ease; } html body .ktTrio__action:hover{ background:var(--ks-carte); } html body .ktTrio__action.est-plein{ background:#FFFFFF; border-color:#FFFFFF; color:#111111 !important; } html body .ktTrio__action.est-plein:hover{ background:#E8E8E8; } /* De l'air au-dessus du bouton quand la liste est courte. */ html body .ktTrio__liste + .ktTrio__action{ margin-top:40px; } @media (max-width:900px){ html body .ktTrio__grille{ grid-template-columns:1fr; } html body .ktTrio__carte{ border-left:0; border-top:1px solid var(--ks-bord); } html body .ktTrio__grille > .ktTrio__carte:first-child{ border-top:0; } } /* La bascule globale en haut de page n'a plus lieu d'être : chaque carte porte la sienne. On la masque plutôt que de la retirer du PHP — le script qui la pilote sert aussi au comparatif plus bas. */ html body .ptBill, html body .ptHero__billNote{ display:none !important; } /* ---- Le logo du pied de page ---- Deux fichiers, un par fond, comme dans l'en-tête. Le badge « PRO » disparaît avec le mot : la marque est désormais le dessin. */ html body .bpFooter-brand{ display:inline-flex !important; align-items:center !important; gap:9px !important; } html body .bpFooter-brandImg{ display:block; height:20px; width:auto; } html body .bpFooter-brandImg.est-sombre{ display:none; } html body .bpFooter-brandText{ font-size:19px !important; text-transform:none !important; letter-spacing:-.03em !important; color:var(--ks-encre) !important; font-family:var(--ks-police) !important; font-weight:600 !important; } html body .bpFooter-brandBadge{ display:none !important; } /* ---- La marque du pied de page, identique à celle du bandeau ---- Même hauteur d'icône (15 px), même corps de texte (18 px), même casse. Les capitales venaient de la feuille de typographie du site, qui les impose sur les classes de logo : il faut le poids d'un identifiant pour les défaire, d'où `:not(#\9)`. La largeur suit celle du bandeau : 1600 px, 32 px de retrait. */ html body .bpFooter-brandImg:not(#\9){ height:15px !important; } html body .bpFooter-brandText:not(#\9){ font-size:18px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:-.03em !important; font-family:var(--ks-police) !important; color:var(--ks-encre) !important; } html body .bpFooter-brandBadge:not(#\9){ display:none !important; } html body .bpFooter-brand:not(#\9){ gap:9px !important; } html body .bpFooter-inner:not(#\9){ max-width:1600px !important; margin-left:auto !important; margin-right:auto !important; } /* ---- LE SECOND PIED DE PAGE, celui du blog et des articles ---- Le site en a deux : `footer.php`, traité ci-dessus, et celui que sert `applayout.php`. Tout ce qui a été demandé pour le pied de page n'avait été appliqué qu'au premier — d'où, sur le blog, une marque en capitales sans icône et un contenu décalé de cinq pixels par rapport au bandeau. Les règles qui suivent sont celles d'au-dessus, transposées à ses classes : `bpFooter-logo` au lieu de `bpFooter-brand`, `bpFooter-logoText` au lieu de `bpFooter-brandText`. */ html body .bpFooter-logo:not(#\9){ display:inline-flex !important; align-items:center !important; gap:9px !important; } html body .bpFooter-logoText:not(#\9){ font-size:18px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:-.03em !important; font-family:var(--ks-police) !important; color:var(--ks-encre) !important; } /* La largeur : mêmes paliers que la barre du haut, comme pour l'autre pied de page — 29 px sur téléphone, 37 px au-delà. */ html body .bpFooter-container:not(#\9){ max-width:1600px !important; margin-left:auto !important; margin-right:auto !important; padding-left:29px !important; padding-right:29px !important; } @media (min-width:768px){ html body .bpFooter-container:not(#\9){ padding-left:37px !important; padding-right:37px !important; } } /* ==================================================================== LE MENU MOBILE, SUR TOUTES LES PAGES Ces règles ne vivaient que dans le bas de page de l'accueil : elle seule avait un menu noir, les autres gardaient le blanc d'origine. Déplacées ici, elles suivent partout où le thème est chargé. ==================================================================== */ /* ==================================================================== LE MENU MOBILE, EN NOIR Repris d'après la capture : panneau plein noir, un filet sous la barre, des entrées espacées sans séparateurs, et les deux actions posées en bas, pleine largeur. ==================================================================== */ html body.pro-menu-open.is-dark-bg #proMobileMenu{ background:#000000 !important; color:#F2F2F3 !important; border-top:1px solid #2E2E2E !important; display:flex !important; flex-direction:column !important; padding-left:29px !important; padding-right:29px !important; } html body.is-dark-bg #proMobileMenu .pmenu-close{ background:transparent !important; border:0 !important; color:#F2F2F3 !important; } html body.is-dark-bg #proMobileMenu .pmenu-close svg, html body.is-dark-bg #proMobileMenu .pmenu-close line{ stroke:#F2F2F3 !important; color:#F2F2F3 !important; } html body.is-dark-bg #proMobileMenu .pmenu-links{ flex:0 0 auto !important; padding-left:0 !important; padding-right:0 !important; } /* Pas de séparateurs : sur la capture, c'est l'espacement seul qui sépare les entrées. */ html body.is-dark-bg #proMobileMenu .pmenu-link{ color:#F2F2F3 !important; font-size:21px !important; font-weight:400 !important; letter-spacing:-.02em !important; padding:17px 0 !important; border:0 !important; background:transparent !important; } html body.is-dark-bg #proMobileMenu .pmenu-arrow svg, html body.is-dark-bg #proMobileMenu .pmenu-arrow line, html body.is-dark-bg #proMobileMenu .pmenu-arrow path{ stroke:#7B7B7B !important; color:#7B7B7B !important; } html body.is-dark-bg #proMobileMenu .pmenu-sub{ background:transparent !important; } html body.is-dark-bg #proMobileMenu .pmenu-subLink{ color:#A8A8AE !important; } html body.is-dark-bg #proMobileMenu .pmenu-subTxt{ color:#A8A8AE !important; } html body.is-dark-bg #proMobileMenu .pmenu-subImg{ background:#161616 !important; border-radius:4px !important; } /* Les deux actions, en bas, empilées, pleine largeur. L'ordre de la capture : le contour d'abord, le plein ensuite. */ html body.is-dark-bg #proMobileMenu .pmenu-topCtas{ display:flex !important; flex-direction:column !important; gap:12px !important; margin-top:auto !important; padding:0 0 34px !important; width:100% !important; } html body.is-dark-bg #proMobileMenu .pmenu-topCta{ width:100% !important; border-radius:4px !important; padding:15px 18px !important; text-align:center !important; justify-content:center !important; font-size:15px !important; font-weight:500 !important; } html body.is-dark-bg #proMobileMenu .pmenu-topCta--ghost{ order:1 !important; background:transparent !important; color:#F2F2F3 !important; border:1px solid #2E2E2E !important; } html body.is-dark-bg #proMobileMenu .pmenu-topCta--primary{ order:2 !important; background:#333333 !important; color:#FFFFFF !important; border:1px solid #333333 !important; } /* La barre du haut suit le menu : noire, logo blanc. */ html body.pro-menu-open.is-dark-bg #proMobileTopBar[class]{ background:#000000 !important; border-bottom:1px solid #2E2E2E !important; } html body.pro-menu-open.is-dark-bg #proMobileTopBar .ptop-logo, html body.pro-menu-open.is-dark-bg #proMobileTopBar .ptop-logoText, html body.pro-menu-open.is-dark-bg #proMobileTopBar .ptop-lang, html body.pro-menu-open.is-dark-bg #proMobileTopBar .ptop-burger{ color:#F2F2F3 !important; } html body.pro-menu-open.is-dark-bg #proMobileTopBar .ptop-logoImg.est-claire{ display:block !important; } html body.pro-menu-open.is-dark-bg #proMobileTopBar .ptop-logoImg.est-sombre{ display:none !important; } html body.pro-menu-open.is-dark-bg #proMobileTopBar .ptop-login{ background:#333333 !important; color:#FFFFFF !important; } /* ---- Sur téléphone, le pied de page suit la barre du haut ---- La barre pose son contenu à 29 px du bord ; le pied de page était à 16 px, et le décalage se voyait au bas de chaque page. On aligne sur la barre, pas l'inverse : c'est elle qui donne le ton en haut d'écran. */ @media (max-width:719.98px){ html body .bpFooter-inner:not(#\9){ padding-left:29px !important; padding-right:29px !important; } } /* ---- Sur ordinateur aussi, et ça manquait ---- Seul le téléphone avait été aligné. Sur grand écran la barre pose son contenu à 37 px du bord de l'écran et le pied de page à 60 : vingt-trois pixels d'écart entre le logo du haut et celui du bas, sur toute la hauteur de la page. Les deux paliers ci-dessous sont ceux de la barre, au pixel près — c'est elle qui donne le ton, ici comme sur téléphone. */ @media (min-width:720px) and (max-width:767.98px){ html body .bpFooter-inner:not(#\9){ padding-left:29px !important; padding-right:29px !important; } } @media (min-width:768px){ html body .bpFooter-inner:not(#\9){ padding-left:37px !important; padding-right:37px !important; } } /* ==================================================================== LA BARRE COLLANTE DU COMPARATIF SUR TÉLÉPHONE -------------------------------------------------------------------- `comparatif-mobile.php` pose sa propre barre de pastilles — `.cmpBar` — au-dessus du tableau, en blanc. Ce n'est pas l'en-tête du comparatif que je pensais corriger la dernière fois : c'est un deuxième élément, d'un autre fichier, qui se superpose au même endroit. Trouvé en pointant la couleur à l'écran plutôt qu'en cherchant dans la feuille. ==================================================================== */ html body .cmpBar:not(#\9){ background:var(--ks-fond) !important; border-bottom:1px solid var(--ks-bord) !important; box-shadow:none !important; } html body .cmpTab:not(#\9){ background:transparent !important; border:1px solid var(--ks-bord) !important; border-radius:4px !important; color:var(--ks-encre-2) !important; } html body .cmpTab.is-actif:not(#\9){ background:var(--ks-bouton) !important; border-color:var(--ks-bouton) !important; color:#FFFFFF !important; } /* ---- Les boutons des plans, tous gris ---- Le troisième était blanc plein pour se distinguer ; sur téléphone les cartes se lisent l'une après l'autre, la distinction ne sert plus à rien et le blanc tranche trop. */ html body .ktTrio__action:not(#\9), html body .ktTrio__action.est-plein:not(#\9){ background:var(--ks-bouton) !important; border-color:var(--ks-bouton) !important; color:#FFFFFF !important; } html body .ktTrio__action:not(#\9):hover{ background:#3F3F46 !important; } /* ==================================================================== LA PAGE FAQ -------------------------------------------------------------------- La structure était déjà la bonne — titre et sommaire à gauche, questions à droite. Ce qui manquait : des lignes plates qui partagent leurs bordures dans un cadre, au lieu de blocs gris espacés à coins arrondis. ==================================================================== */ html body .faqList:not(#\9){ border:1px solid var(--ks-bord) !important; border-radius:0 !important; background:var(--ks-fond) !important; } html body .faqItem:not(#\9){ background:transparent !important; border:0 !important; border-top:1px solid var(--ks-trait) !important; border-radius:0 !important; margin:0 !important; box-shadow:none !important; } html body .faqList > .faqItem:first-child:not(#\9){ border-top:0 !important; } html body .faqItem > button:not(#\9), html body .faqItem > summary:not(#\9), html body .faqItem [class*="__q"]:not(#\9){ background:transparent !important; color:var(--ks-encre) !important; padding:20px 22px !important; font-size:15.5px !important; } html body .faqItem [class*="__a"]:not(#\9), html body .faqItem [class*="__r"]:not(#\9){ color:var(--ks-encre-2) !important; padding:0 22px 20px !important; } /* Le sommaire de gauche : texte simple, repère sur l'entrée courante. */ html body .faqSide__navItem:not(#\9){ background:transparent !important; border:0 !important; border-left:2px solid transparent !important; border-radius:0 !important; padding-left:14px !important; color:var(--ks-encre-2) !important; } html body .faqSide__navItem.is-actif:not(#\9), html body .faqSide__navItem[aria-current]:not(#\9){ color:var(--ks-encre) !important; border-left-color:var(--ks-encre) !important; } /* ==================================================================== LES ARTICLES — CE QUI RESTAIT DE TRAVERS ==================================================================== */ /* Un titre sans image gardait 640 px de hauteur : un écran de vide avant la première ligne. Sans image, il n'a plus à réserver la place d'une image. */ html body .bpHeroBlack--noImage:not(#\9){ min-height:0 !important; height:auto !important; padding:56px 0 8px !important; } /* Le sommaire : des entrées en texte, comme sur vos captures, et non des pastilles pleines qui alourdissent la colonne. */ html body .bpTocH2Link:not(#\9){ background:transparent !important; border-radius:0 !important; border-left:2px solid transparent !important; padding-left:14px !important; color:var(--ks-encre-2) !important; } html body .bpTocH2Link.is-active:not(#\9), html body .bpToc .is-active > .bpTocH2Link:not(#\9){ color:var(--ks-encre) !important; border-left-color:var(--ks-encre) !important; } /* Les deux derniers fonds clairs relevés sur l'article. */ html body .bpPdf:not(#\9), html body .back:not(#\9), html body [class*="bpPdf"]:not(#\9){ background:var(--ks-fond) !important; border:1px solid var(--ks-bord) !important; border-radius:0 !important; color:var(--ks-encre) !important; } /* ==================================================================== LA BARRE COLLANTE DES PLANS : ALIGNÉE, SANS TRAIT ==================================================================== */ html body .cmpBar:not(#\9){ border-bottom:0 !important; padding-left:29px !important; padding-right:29px !important; } /* ---- Le vide en haut des articles sans image ---- Ce n'était ni `height` ni `min-height` mais `aspect-ratio:16/7` : la bannière réservait la place d'une image absente, jusqu'à 640 px de noir avant le titre. Mes deux premières corrections tombaient à côté parce qu'elles visaient les mauvaises propriétés. */ html body .bpHeroBlack--noImage:not(#\9){ aspect-ratio:auto !important; min-height:0 !important; max-height:none !important; height:auto !important; } /* ---- L'anneau tournant de l'encart Google ---- Un dégradé conique en `::before` faisait un liseré multicolore autour d'un encart devenu noir : l'effet se lisait comme un défaut d'affichage. On garde l'encart, on retire l'anneau. */ html body .bpGoogPref:not(#\9)::before{ display:none !important; } html body .bpGoogPref:not(#\9){ border:1px solid var(--ks-bord) !important; } html body .bpGoogPref__int:not(#\9){ border:0 !important; } /* ---- La barre collante des plans, calée sur le bandeau ---- Mesuré : le bandeau pose son contenu à 29 px, la barre l'avait à 45 — son retrait de 29 px s'ajoutait aux 16 px du conteneur de pastilles. On remet ce conteneur à zéro ; c'est la barre seule qui décide. */ @media (max-width:719.98px){ html body .cmpTabs:not(#\9){ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; } /* Et la grille du comparatif rentre entre les rails, comme le reste : elle s'arrêtait à 16 px du bord au lieu de 24. */ html body .ktCompareTable:not(#\9), html body .ktCompare__wrap:not(#\9){ padding-left:var(--ks-marge) !important; padding-right:var(--ks-marge) !important; margin-left:0 !important; margin-right:0 !important; } } /* ==================================================================== UN SEUL NIVEAU DÉCIDE DU RETRAIT -------------------------------------------------------------------- J'ai ajouté du retrait trois fois de suite sans regarder ce que les parents posaient déjà, et les valeurs s'empilaient : 16 px de la section, 24 du conteneur, 24 de la table — le texte finissait à 64 px du bord au lieu de 24. La chaîne mesurée était : .ktCompare 16 → .ktCompare__wrap 24 → .ktCompareTable 24 → 64 .ktCompare 16 → .ktCompare__wrap 24 → .cmpBar 29 → pastille à 53 On remet tout à zéro sauf UN niveau, `.ktCompare__wrap`, qui porte le retrait des rails. La barre collante y ajoute les 5 px qui la calent sur le contenu du bandeau, comme ailleurs. ==================================================================== */ @media (max-width:719.98px){ html body .ktCompare:not(#\9){ padding-left:0 !important; padding-right:0 !important; } html body .ktCompare__wrap:not(#\9){ padding-left:var(--ks-marge) !important; padding-right:var(--ks-marge) !important; } html body .ktCompareTable:not(#\9), html body .ktCompareTable__scroll:not(#\9){ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; } html body .cmpBar:not(#\9){ margin-left:0 !important; margin-right:0 !important; padding-left:5px !important; padding-right:5px !important; } html body .cmpTabs:not(#\9){ padding-left:0 !important; padding-right:0 !important; } /* ---- La FAQ : même règle, même cause ---- */ html body .faqPage:not(#\9){ padding-left:0 !important; padding-right:0 !important; } html body .faqLayout:not(#\9){ padding-left:var(--ks-marge) !important; padding-right:var(--ks-marge) !important; } html body .faqMain:not(#\9), html body .faqSide:not(#\9), html body .faqCat:not(#\9){ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; } /* Le sommaire collant du haut se voyait en clair par transparence : on lui donne le fond de la page, sinon le contenu défile derrière lui. */ html body .faqSide:not(#\9), html body .faqSide__nav:not(#\9), html body .faqSide__toggle:not(#\9){ background:var(--ks-fond) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } } /* La FAQ débordait de 24 px à droite : le retrait ajouté au conteneur s'ajoutait à une largeur déjà fixée à 100 %. `border-box` fait compter le retrait DANS la largeur au lieu de s'y ajouter — c'est la même cause que les débordements du début de ce chantier. */ @media (max-width:719.98px){ html body .faqPage:not(#\9), html body .faqLayout:not(#\9), html body .faqMain:not(#\9), html body .faqSide:not(#\9), html body .faqCat:not(#\9), html body .faqList:not(#\9){ box-sizing:border-box !important; min-width:0 !important; max-width:100% !important; } html body .faqLayout:not(#\9){ display:block !important; } } /* ---- Le comparatif sur téléphone : le texte respire, le cadre tient ---- Mesuré : l'intitulé commençait exactement à 24 px et la valeur finissait exactement à 366 px — c'est-à-dire SUR les deux rails, collés. Le cadre du tableau reste à cheval sur les lignes, mais son contenu rentre de 16 px, comme partout ailleurs sur le site. */ @media (max-width:719.98px){ html body .ktCompareTable:not(#\9){ border-left:1px solid var(--ks-trait) !important; border-right:1px solid var(--ks-trait) !important; } html body .ktCompareRow:not(#\9), html body .ktCompareTable__thRow:not(#\9), html body .ktCompareSection:not(#\9){ padding-left:16px !important; padding-right:16px !important; box-sizing:border-box !important; } } /* ==================================================================== LES TITRES RENTRENT DE 28 px, COMME SUR L'ACCUEIL -------------------------------------------------------------------- Mesuré sur l'accueil : ses intitulés et ses titres commencent à 28 px du rail — c'est la valeur de `--souffle`. Sur le blog et la FAQ, plusieurs étaient à 0, c'est-à-dire posés sur la ligne. On reprend le même écart au lieu d'en inventer un : deux valeurs proches mais différentes se remarquent plus qu'un décalage franc. ==================================================================== */ :root{ --ks-souffle:28px; } @media (max-width:719.98px){ :root{ --ks-souffle:16px; } } html body .bpHeroTitle:not(#\9), html body .bpAllTitle:not(#\9), html body .bpHero__sub:not(#\9), html body .bpAll__sub:not(#\9), html body .faqSide__h:not(#\9), html body .faqSide__nav:not(#\9), html body .faqCat__head:not(#\9){ padding-left:var(--ks-souffle) !important; box-sizing:border-box !important; } /* Le sommaire de la FAQ garde son repère à gauche : le retrait s'ajoute au trait, il ne le remplace pas. */ html body .faqSide__navItem:not(#\9){ padding-left:14px !important; } /* Le pied de page suit la même règle pour ses intitulés de colonne. */ html body .bpFooter-h3:not(#\9), html body .bpFooter-colTitle:not(#\9){ padding-left:0 !important; } /* ==================================================================== LES CATÉGORIES DU BLOG Pastilles sur grand écran, alignées sur le titre ; menu déroulant sur téléphone, où six pastilles qui glissent latéralement se ratent. ==================================================================== */ html body .bpCats:not(#\9){ padding-left:var(--ks-souffle) !important; padding-right:var(--ks-souffle) !important; box-sizing:border-box !important; } html body .bpCats__select:not(#\9){ display:none !important; } @media (max-width:719.98px){ html body .bpCats__rail:not(#\9){ display:none !important; } html body .bpCats__select:not(#\9){ display:block !important; width:100% !important; box-sizing:border-box !important; background:var(--ks-fond) !important; color:var(--ks-encre) !important; border:1px solid var(--ks-bord) !important; border-radius:4px !important; padding:13px 14px !important; font-family:var(--ks-police) !important; font-size:15px !important; /* La flèche du système est remplacée : celle des navigateurs mobiles est souvent sombre sur sombre. */ appearance:none !important; -webkit-appearance:none !important; background-image:linear-gradient(45deg, transparent 50%, #A8A8AE 50%), linear-gradient(135deg, #A8A8AE 50%, transparent 50%) !important; background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50% !important; background-size:6px 6px, 6px 6px !important; background-repeat:no-repeat !important; } html body .bpCats__select option{ background:#111113; color:#F2F2F3; } } /* ---- La cale sous le bandeau ---- `bpHeaderSpacer` réserve la hauteur de la barre fixe ; elle est peinte en blanc dans la feuille d'origine, ce qui laissait un liseré clair entre la barre et la page. Relevé en balayant la colonne centrale pixel par pixel sous la barre : c'était le seul élément clair. */ html body .bpHeaderSpacer:not(#\9){ background:var(--ks-fond) !important; border:0 !important; }