/* Theme Name: Prism Theme URI: https://prism-neo.com Author: C4U — Thomas Dormont Description: Thème du site vitrine Prism. Direction « Démonstratif » : composition asymétrique, produit visible d'emblée. Fond vivant en cinq lueurs, typographie Unbounded / Geologica / Satoshi auto-hébergée. Version: 0.50.5 Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 8.0 License: Propriétaire Text Domain: prism */ /* ══════════════════════════════════════════════════════════════════════════ Ce fichier reprend TEL QUEL le CSS des maquettes. Rien n'a été réécrit pour WordPress : c'est tout l'intérêt d'avoir maquetté en HTML/CSS plutôt qu'en outil de dessin. ══════════════════════════════════════════════════════════════════════════ */ /* ── POLICES AUTO-HÉBERGÉES ─────────────────────────────────────────────── Servies depuis le domaine, pas depuis Google ni Fontshare : c'est plus rapide, et aucune adresse IP de visiteur ne part chez un tiers. */ @font-face{font-family:'Unbounded';src:url('assets/fonts/unbounded.woff2') format('woff2'); font-weight:300 800;font-style:normal;font-display:swap} @font-face{font-family:'Geologica';src:url('assets/fonts/geologica.woff2') format('woff2'); font-weight:200 700;font-style:normal;font-display:swap} @font-face{font-family:'Satoshi';src:url('assets/fonts/satoshi-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Satoshi';src:url('assets/fonts/satoshi-500.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Satoshi';src:url('assets/fonts/satoshi-700.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap} :root{ --px-bg:#070A0E; --px-surface:linear-gradient(168deg,rgba(36,50,64,.62),rgba(10,15,21,.86) 62%); --px-surface-hi:linear-gradient(168deg,rgba(48,64,80,.7),rgba(13,19,26,.88) 62%); --px-rule:rgba(255,255,255,.075); --px-ctl:rgba(255,255,255,.05); --px-ctl-bd:rgba(255,255,255,.1); --px-ink:#F4F6F8; --px-ink-2:#A9B2BE; --px-ink-3:#78818F; --px-ink-4:#5A6270; /* Une entrée de menu dont la page n'existe pas encore. Elle doit se lire comme éteinte SANS descendre sous 4,5 de contraste : --px-ink-4 n'était qu'à 3,23, ce qui est un défaut d'accessibilité sur du texte de 13,5 px. Mesuré à 4,51 sur le fond de page. */ --px-eteint:#6F798A; /* Le texte qui n'est pas au centre de l'écran. Volontairement à la limite du lisible : 1,41 de contraste, là où 1,0 serait invisible et où le texte atteint est à 18,31. Demande de Thomas, formulée quatre fois. Aucune phrase n'y reste — elle s'allume en arrivant au centre et s'y rééteint en le quittant. */ --px-fondu:#262C37; --px-cy:#19C8E6; --px-pos:#3FD69C; /* ── LA DISPERSION ────────────────────────────────────────────────────── Les cinq teintes des directions « Réfraction » et « Spectre », reprises telles quelles. Elles servent à DISTINGUER des éléments d'une même série — un numéro, un contour — jamais à colorer un bouton ni un lien : là-dessus le cyan reste seul, et la règle tient toujours. L'ordre n'est pas décoratif : la série part du rose et CONVERGE vers le cyan de la marque. Le prisme décompose la lumière, la dernière étape la recompose — et c'est celle qui bascule dans la section suivante. */ --px-s1:#FF5FA8; --px-s2:#A66BFF; --px-s3:#6E8BFF; --px-s4:#46E0A0; --px-s5:#19C8E6; /* ⚠️ L'ambre a été MESURÉ, pas choisi à l'œil. Les cinq premières teintes tiennent entre 0,258 et 0,572 de luminance ; un jaune franc monte à 0,68 et jusqu'à 0,75, il écraserait tout le reste. Celui-ci est à 0,545 — juste sous le vert — donc il se lit comme un jaune sans sortir du jeu. Un cran plus clair et la palette perd son unité. */ --px-s6:#F5B942; /* Le liseré des panneaux teintés : une épaisseur, une intensité, un seul endroit. Les quatre étaient déclarés séparément et avaient dérivé — 46 contre 52 %, et l'écart se voyait d'une section à l'autre. */ --px-liseré:1.6px; --px-liseré-force:58%; --px-r:16px; --px-r-sm:11px; --px-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 70px -40px #000; --px-lin:linear-gradient(158deg,rgba(226,244,250,.42) 0%,rgba(226,244,250,.14) 26%,rgba(226,244,250,.04) 58%,rgba(226,244,250,0) 78%); --px-lin-on:linear-gradient(158deg,rgba(226,244,250,.5) 0%,rgba(226,244,250,.26) 34%,rgba(226,244,250,.2) 62%,rgba(226,244,250,.24) 100%); --px-lin-cy:linear-gradient(158deg,#8FE9F8 0%,#19C8E6 22%,rgba(25,200,230,.28) 48%,rgba(25,200,230,0) 70%); --f-titre:'Unbounded',system-ui,sans-serif; --f-accroche:'Geologica',system-ui,sans-serif; --f-texte:'Satoshi',system-ui,sans-serif; } *{box-sizing:border-box} /* ⛔⛔ NE PAS POSER `isolation:isolate` ICI. Essayé le 2026-08-20 contre la barre noire d'iOS, et le résultat a été bien pire : le fond vivant a DISPARU, remplacé par un gris uniforme très granuleux sur toute la page. La raison : le grain (`body::after`) est en `mix-blend-mode:overlay` et il doit se mélanger au fond vivant, qui est peint par `.px-fond` — un frère, pas un parent. Isoler le corps enferme le mélange dans un groupe où le résultat n'est plus celui qu'on avait réglé, et l'`overlay` s'applique à plat au lieu de suivre la lumière des lueurs. ⚠️ Retenir : sur ce site, le grain et le fond vivant forment UN SEUL réglage. Tout ce qui change leur groupe de composition change le dessin — `isolation`, `filter`, `opacity` ou `transform` posés sur un ancêtre commun ont le même effet de bord. */ /* ⛔⛔ LE RELÈVEMENT DE BASE A ÉTÉ RETIRÉ LE 2026-08-21 — NE PAS LE REMETTRE. Ajouté la veille contre la barre noire d'iOS : un dégradé sur le corps, en `background-attachment:fixed`, qui relevait la base aux deux bords de l'écran. ⛔ IL N'A RIEN RÉGLÉ ET IL A CASSÉ macOS SAFARI. Thomas : « rien à changer » sur iOS le 20, puis le 21 « tu as fait sauter tout le fond du site sur Safari », et — le détail qui désigne le coupable — « bizarre, pas sur mobile ». iPhone bon, Chrome bon, macOS Safari lavé de gris. ⚠️ LA CAUSE : un fond de corps en `background-attachment:fixed` SOUS un grain en `mix-blend-mode:overlay`, lui-même `position:fixed`. Deux calques fixes dont l'un se mélange à l'autre — macOS Safari ne les compose pas comme les autres moteurs, et le mélange part à plat. ⭐ La règle à retenir : sur ce site, N'AJOUTER AUCUN CALQUE FIXE sous le grain. Le fond vivant et le grain forment déjà un couple réglé ; tout ce qui s'intercale change le mélange, et pas toujours sur tous les navigateurs. Même leçon que `isolation:isolate`, essayé le 20 et retiré pour la même raison. */ body{margin:0;background-color:var(--px-bg);color:var(--px-ink);font-family:var(--f-texte); -webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:var(--px-cy);text-decoration:none} /* le saut depuis le sommaire d'un article se fait en glissant, pas d'un coup */ @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} /* Le grain — sans lui le fond se lit comme un aplat. ⚠️ Deux erreurs successives ici. D'abord `mix-blend-mode:overlay` avec un bruit peu contrasté : overlay multiplie sur les zones sombres, et sur un fond à 8/255 ça ne donnait que 3,4 points d'amplitude. Ça passait tant que les lueurs étaient fortes ; depuis que le flou est remplacé par un dégradé leur crête est tombée de 78 % à 30,6 %, le fond s'est assombri, et le grain a disparu avec. Puis l'alpha simple, qui donnait bien 6 points partout mais ÉCLAIRCISSAIT le fond de 7 points — un grain ne doit pas changer la luminosité de ce qu'il grène. La bonne combinaison est overlay avec un bruit CONTRASTÉ : overlay conserve la moyenne, donc le fond ne bouge pas, et l'amplitude suit la luminosité — fort là où il y a de la lumière, discret dans le noir, comme un vrai grain. Le bruit est à pleine amplitude et l'élément à 78 % : ±12,5 points sur le noir et ±62 sur une lueur, soit trois fois et demie le grain des maquettes de direction. Au-delà, la moyenne du fond reste juste mais le texte posé dessus commence à vibrer. */ /* ⛔⛔ LE GRAIN NE DÉBORDE PAS, ET C'EST DÉLIBÉRÉ — 2026-08-21. Il a porté `--px-fond-marge` comme le fond pendant une journée. Résultat : macOS Safari lavait TOUT le site en gris, le grain seul restant visible. Lui seul : ni Chrome, ni iOS. Le seul calque du site en `mix-blend-mode`, et le seul symptôme possible d'une fusion ratée. ⭐ POURQUOI : `overlay` se compose contre ce qui est peint dessous. Étendu au-delà de la fenêtre, le groupe de fusion couvre une zone que Safari ne peint pas, et toute la fusion part avec. ⚠️ CE QUE ÇA COÛTE : dans la bande révélée par le rebond iOS, on a les lueurs sans le grain. C'est invisible en pratique — et sans commune mesure avec un navigateur de bureau entier hors service. ⛔ NE PAS lui redonner la marge du fond. Le lien entre les deux a déjà été payé une fois. */ body::after{content:'';position:fixed;inset:0; z-index:1;pointer-events:none;opacity:.78; mix-blend-mode:overlay;background-size:200px 200px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")} /* ── LE FOND VIVANT — cinq lueurs en relais sur un cycle de 30 s ────────── */ /* La dérive de teinte est là, comme avant. Ce qui a changé, c'est ce qu'elle doit retraverser à chaque image. ⚠️ Chaque lueur était un petit dégradé passé au `blur(150px)`, et le `hue-rotate` animé sur ce conteneur obligeait le navigateur à refabriquer tout son contenu soixante fois par seconde — donc à recalculer les cinq flous sur la totalité de l'écran, sans fin. Le coût suit la surface : 1,10 million de pixels sur un 1280×860 contre 0,30 sur un 375×812. D'où une page qui traînait sur ordinateur et pas sur téléphone. Un flou gaussien de cet ampleur ne produit pourtant qu'une chose simple : une tache très douce. On la dessine donc directement, en dégradé à onze arrêts, et il n'y a plus rien à flouter. Les arrêts ne sont pas choisis à l'œil — le profil du flou d'origine a été relevé point par point, et le dégradé s'en écarte au pire de 2,8 sur 255, en moyenne de 0,4. Deux conséquences : la boîte doit être plus grande, puisque le flou débordait largement de la sienne (100vw × 131vh contre 78 × 74, à centre identique), et la crête est bien plus faible qu'avant flou — le flou étalait la matière, il ne l'ajoutait pas : 30,6 % au lieu de 78 %. */ /* ⛔⛔ LE CADRE DÉBORDE L'ÉCRAN DE `--px-fond-marge`, CONTRE LA BARRE NOIRE D'iOS — signalée par Thomas le 2026-08-20 : « en haut où y'a l'adresse du site y'a plus de fond, c'est un truc noir », « c'est vraiment le fond qui ne se prolonge pas ». ⭐ LA PHRASE QUI A TOUT DÉBLOQUÉ : « le texte passe par-dessus ». Le CONTENU va bien dans la bande, le FOND non. Ce n'était donc ni un calque parasite, ni le grain, ni `theme-color` — trois pistes essayées et écartées, dont une qui a cassé le fond en production. La cause : ce cadre est FIXE et rogne ses lueurs au bord de l'écran (`overflow:hidden`). Quand Safari escamote ou ramène ses barres, il révèle une bande au-delà ; le contenu s'y affiche, le cadre non, et ce qui reste est le fond de la racine — `#070A0E`, plat et noir. ⭐ Comparé au site que Thomas donnait en exemple : son fond est un `background` UNI sur le corps, qui se propage au canevas et couvre donc tout ce que le navigateur peint. Ici le fond est un calque : il ne se propage pas. On ne peut pas copier sa méthode, on couvre plus large. ⭐⭐ ET ÇA NE COÛTE RIEN AU DESSIN : les lueurs mesurent DÉJÀ 917 px pour une fenêtre de 700, débordant jusqu'à 338 px au-dessus. Elles existaient, elles étaient seulement rognées. On lève le rognage et on décale les cinq positions d'autant — vérifié dans le navigateur avant déploiement, les cinq retombent au pixel près là où elles étaient. ⚠️ UNE SEULE VALEUR, CINQ USAGES. Les positions sont compensées par la même variable : la changer garde tout aligné, alors que cinq nombres écrits à la main se désynchroniseraient au premier réglage. */ /* ⭐ LA MARGE SERT AU FOND, PAS AU GRAIN — arbitrage du 2026-08-21. Ramenée à zéro le matin pour sauver macOS Safari, elle a immédiatement fait revenir la barre noire FRANCHE en bas sur mobile (Thomas). Ces 140 px faisaient donc bien quelque chose, contrairement à ce que j'avais affirmé : pas le haut, mais le fondu du bas. ⚠️ Les deux calques la portaient. Un seul des deux cassait Safari — celui en `mix-blend-mode`. Elle revient donc ici, et ici seulement. */ :root{--px-fond-marge:140px} .px-fond{position:fixed;inset:calc(-1 * var(--px-fond-marge)) 0;z-index:0; pointer-events:none;overflow:hidden; animation:px-teinte 22s ease-in-out infinite} @keyframes px-teinte{0%{filter:hue-rotate(-20deg)}50%{filter:hue-rotate(50deg)}100%{filter:hue-rotate(-20deg)}} /* `will-change` va sur l'élément qui bouge — `i` porte le déplacement, pas `b`. */ .px-fond i{position:absolute;display:block;width:100vw;height:131vh;will-change:transform} .px-fond i>b{position:absolute;inset:0;display:block; background:radial-gradient(closest-side, rgb(var(--col) / 30.6%) 0%, rgb(var(--col) / 29.4%) 10%, rgb(var(--col) / 25.7%) 20%, rgb(var(--col) / 20.6%) 30%, rgb(var(--col) / 14.9%) 40%, rgb(var(--col) / 9.8%) 50%, rgb(var(--col) / 5.9%) 60%, rgb(var(--col) / 3.2%) 70%, rgb(var(--col) / 1.4%) 80%, rgb(var(--col) / .6%) 90%, transparent 100%)} /* L'opacité rattrape le fait que les cinq n'avaient pas la même transparence d'origine : .78 pour b1 et b4, .72 pour b2, .74 pour b3 et b5. */ .px-fond .b1>b{--col:88 198 232} .px-fond .b2>b{--col:124 107 255;opacity:.92} .px-fond .b3>b{--col:78 143 234;opacity:.95} .px-fond .b4>b{--col:78 190 235} .px-fond .b5>b{--col:70 184 224;opacity:.95} /* Positions recalculées pour que chaque centre retombe exactement où il était avec l'ancienne boîte. */ /* ⚠️ Les `top` d'origine étaient `-50.5vh · 20.5vh · -13.5vh · 20.5vh · -48.5vh`. Le `+ var(--px-fond-marge)` ne déplace rien : il annule exactement le décalage introduit par le débordement du cadre, dont ces positions dépendent. Vérifié — les cinq lueurs retombent au pixel près. */ .px-fond .b1{left:-27vw;top:calc(-50.5vh + var(--px-fond-marge))} .px-fond .b2{left:28vw;top:calc(20.5vh + var(--px-fond-marge))} .px-fond .b3{left:0;top:calc(-13.5vh + var(--px-fond-marge))} .px-fond .b4{left:-30vw;top:calc(20.5vh + var(--px-fond-marge))} .px-fond .b5{left:27vw;top:calc(-48.5vh + var(--px-fond-marge))} @keyframes d1{0%,100%{transform:translate(0,0)}50%{transform:translate(16vw,11vh)}} @keyframes d2{0%,100%{transform:translate(0,0)}50%{transform:translate(-18vw,-9vh)}} @keyframes d3{0%,100%{transform:translate(-8vw,4vh)}50%{transform:translate(10vw,-10vh)}} @keyframes d4{0%,100%{transform:translate(0,0)}50%{transform:translate(15vw,-12vh)}} @keyframes d5{0%,100%{transform:translate(0,0)}50%{transform:translate(-14vw,12vh)}} .px-fond .b1{animation:d1 31s ease-in-out infinite;animation-delay:-9s} .px-fond .b2{animation:d2 38s ease-in-out infinite;animation-delay:-24s} .px-fond .b3{animation:d3 27s ease-in-out infinite;animation-delay:-15s} .px-fond .b4{animation:d4 34s ease-in-out infinite;animation-delay:-5s} .px-fond .b5{animation:d5 29s ease-in-out infinite;animation-delay:-19s} @keyframes g{0%{transform:scale(.9);opacity:.26}18%{transform:scale(1.4);opacity:1} 38%{transform:scale(1.06);opacity:.5}60%{transform:scale(.92);opacity:.3}100%{transform:scale(.9);opacity:.26}} .px-fond i>b{animation:g 30s cubic-bezier(.4,0,.3,1) infinite} .px-fond .b1>b{animation-delay:-24s} .px-fond .b2>b{animation-delay:-18s} .px-fond .b3>b{animation-delay:-12s} .px-fond .b4>b{animation-delay:-6s} .px-fond .b5>b{animation-delay:0s} @media(prefers-reduced-motion:reduce){.px-fond,.px-fond i,.px-fond i>b{animation:none!important}} /* ── CARTES ──────────────────────────────────────────────────────────────── */ .px-card{position:relative;border-radius:var(--px-r);background:var(--px-surface); border:1px solid transparent;box-shadow:var(--px-shadow);padding:22px 24px; transition:background .3s ease,box-shadow .3s ease,transform .3s ease} .px-card::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.4px; pointer-events:none;background:var(--px-lin);transition:background .22s ease; -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor;mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); mask-composite:exclude} .px-card::before{content:'';position:absolute;left:20px;right:20px;top:0;height:1px;z-index:1; pointer-events:none;opacity:.7; background:linear-gradient(90deg,transparent,rgba(226,244,250,.34),transparent)} .px-card>*{position:relative;z-index:2} .px-card:hover{background:var(--px-surface-hi);transform:translateY(-3px)} .px-card:hover::after{background:var(--px-lin-on)} .px-card.px-accent{background:linear-gradient(150deg,rgba(25,200,230,.13),rgba(9,13,19,.66) 58%)} .px-card.px-accent::after{background:var(--px-lin-cy)} /* ── LE LISERÉ DES PANNEAUX TEINTÉS ─────────────────────────────────────── ⚠️ Un dégradé linéaire projeté sur un contour dépend du RAPPORT de la carte : la lumière entre par un coin et meurt à l'opposé. Les panneaux teintés de la page vont de 0,49 à 0,75 — aucun ne s'éclairait au même endroit, et l'ensemble avait l'air sale. Épaisseur et intensité CONSTANTES, déclarées une fois pour les quatre. */ .px-trouv::after, .px-story::after,.px-story:hover::after, .px-vis .px-card::after, .px-pq-conv .visuel .px-card::after, .px-panneau .px-apercu::after{ padding:var(--px-liseré); background:color-mix(in srgb,var(--a,var(--px-cy)) var(--px-liseré-force),transparent)} /* ── ÉLÉMENTS COMMUNS ────────────────────────────────────────────────────── */ .px-lbl{font-family:var(--f-texte);font-size:10.5px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--px-ink-3);display:flex;align-items:center;gap:9px;margin:0} .px-lbl::before{content:'';width:14px;height:1px;flex:none;background:currentColor;opacity:.55} .px-tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700; letter-spacing:.11em;text-transform:uppercase;color:#9FE4F2;border:1px solid var(--px-ctl-bd); border-radius:20px;padding:6px 13px;background:var(--px-ctl)} /* ── LA PASTILLE EN PHRASE ──────────────────────────────────────────────── ⚠️ Petites capitales, interlettrage large, cyan et point lumineux : c'est la signature typographique de toutes les pages d'intelligence artificielle depuis deux ans, et le brief du dépôt la nomme comme un piège. Sur une ACCROCHE — une phrase, pas une étiquette — elle sonne faux. Ici : bas de casse, corps de lecture, interlettrage normal. La pastille reste, sa typographie devient celle d'une phrase. La couleur et la lumière reviennent, mais autrement : le fond prend le dégradé du titre, le contour est un liseré au masque comme partout ailleurs sur le site, et la lueur est serrée. Ce qui ne revient PAS, c'est le point cyan qui pulse — c'est lui l'élément le plus reconnaissable de cette esthétique, et il ne sert à rien ici. */ .px-tag.px-tag-phrase{position:relative;font-family:var(--f-accroche);font-size:13.5px; font-weight:500;letter-spacing:-.01em;text-transform:none;color:#CFE9F6; padding:8px 18px;border:0; background:linear-gradient(96deg, color-mix(in srgb,#8FE9F8 15%,transparent), color-mix(in srgb,#6E6BFF 13%,transparent)); box-shadow:0 0 26px -8px rgba(122,190,255,.55)} /* Le liseré dégradé, construit au masque comme tous les contours teintés. */ .px-tag.px-tag-phrase::after{content:'';position:absolute;inset:0;border-radius:inherit; padding:1.2px;pointer-events:none;opacity:.8; background:linear-gradient(96deg,#8FE9F8,#6E6BFF); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor;mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); mask-composite:exclude} .px-tag.px-tag-phrase::before{display:none} .px-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--px-cy); box-shadow:0 0 10px 1px rgba(25,200,230,.8);flex:none} .px-num{font-family:var(--f-titre);font-weight:700;letter-spacing:-.05em} .px-d{display:inline-flex;align-items:baseline;gap:3px;font-size:12.5px;font-weight:650; font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:7px;color:var(--px-pos); background:color-mix(in srgb,var(--px-pos) 13%,transparent)} .px-rule{height:1px;background:var(--px-rule);border:0;margin:0} /* ── LA PAGE ─────────────────────────────────────────────────────────────── */ .px-page{position:relative;z-index:2} .px-wrap{max-width:1240px;margin:0 auto;padding:0 34px} /* barre de navigation */ /* ── L'EN-TÊTE ──────────────────────────────────────────────────────────── Fixée en haut, visible en tout temps. L'effacement au défilement a été essayé puis écarté : sur un site de quatre pages, l'accès au menu vaut mieux que les 88 px d'écran qu'il rendait. ⚠️ La hauteur est mesurée par le script et posée dans `--px-entete-h` : elle change avec la largeur de l'écran, et une valeur en dur laisserait soit un trou, soit du contenu caché sous la barre. */ .px-entete{position:fixed;top:0;left:0;right:0;z-index:60; /* La barre est d'abord du verre : c'est le FLOU qui rend le texte lisible, pas l'assombrissement. Le fond noir ne fait qu'asseoir le contraste — à 82 % il masquait le fond au lieu de le laisser passer. */ background:color-mix(in srgb,var(--px-bg) 36%,transparent); backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2); } /* Le fondu sous la barre. Trois choses le rendaient grossier : 1. il démarrait à 74 % alors que la barre est à 82 % — une MARCHE de huit points juste sous elle, qu'on lit comme un bord ; 2. deux arrêts seulement, donc une rampe linéaire : l'œil voit le début et la fin d'un dégradé d'alpha linéaire, ça fait une bande ; 3. 46 px, trop court pour que la descente passe inaperçue. Ici : départ exactement à l'opacité de la barre, treize arrêts sur une DÉCROISSANCE EXPONENTIELLE, sur 118 px. Le départ suit la barre — s'il s'en écarte, la marche revient. L'exposant est passé de 2,8 à 3,6 : à quantité d'encre égale l'ombre serait deux fois trop lourde maintenant que la barre est transparente. */ .px-entete::after{content:'';position:absolute;left:0;right:0;top:100%;height:118px; pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb,var(--px-bg) 36.0%,transparent) 0.0%, color-mix(in srgb,var(--px-bg) 26.3%,transparent) 8.3%, color-mix(in srgb,var(--px-bg) 18.7%,transparent) 16.7%, color-mix(in srgb,var(--px-bg) 12.8%,transparent) 25.0%, color-mix(in srgb,var(--px-bg) 8.4%,transparent) 33.3%, color-mix(in srgb,var(--px-bg) 5.2%,transparent) 41.7%, color-mix(in srgb,var(--px-bg) 3.0%,transparent) 50.0%, color-mix(in srgb,var(--px-bg) 1.5%,transparent) 58.3%, color-mix(in srgb,var(--px-bg) 0.7%,transparent) 66.7%, color-mix(in srgb,var(--px-bg) 0.2%,transparent) 75.0%, color-mix(in srgb,var(--px-bg) 0.1%,transparent) 83.3%, color-mix(in srgb,var(--px-bg) 0.0%,transparent) 91.7%, transparent 100.0%)} /* ⚠️ Et le trait plein sous la barre est retiré : avec un fondu dessous, il redevient exactement le bord net qu'on cherchait à supprimer. À sa place, un filet qui s'éteint sur les côtés — le fondu fait le reste. */ .px-entete .px-nav{border-bottom:0} .px-entete .px-nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,var(--px-rule) 18%,var(--px-rule) 82%,transparent)} .px-entete .px-nav{position:relative} /* ⛔⛔ `margin-block-start:0` — WORDPRESS AJOUTE 24 px À `
`, SUR TOUTES LES PAGES. Sa feuille globale pose `:root :where(.is-layout-flow) > *{margin-block-start:24px}` sur tout enfant qui n'est pas le premier — et `
` ne l'est jamais, l'en-tête la précède. Le thème, lui, n'a jamais demandé cette marge. ⭐ Repéré le 2026-08-21 par Thomas sur un article : « un sacré écart entre la fin de la nav et le fil d'Ariane, je ne sais pas à quoi il sert ». Il ne servait à rien. Mesuré : 24 px parasites + 52 px voulus par l'en-tête d'article. Vérifié présent sur l'accueil, Nos offres, Affiliation, le blog et Contact. ⚠️ Le `padding-top`, lui, est INDISPENSABLE : l'en-tête est `position:fixed`, sans lui le contenu passerait dessous. Sa valeur est mesurée par le script. ⭐ Deuxième fois AUJOURD'HUI que cette feuille globale mord — voir aussi `.px-bl-cats`, dont elle annulait la marge haute. ⛔⛔ LE RETRAIT NE VAUT QUE POUR LE BLOG — arbitrage de Thomas, même jour. La marge est accidentelle côté code, mais toutes les autres pages ont été DESSINÉES ET VALIDÉES avec : « accidentel » ne veut pas dire « moche ». L'enlever partout les avait remontées de 24 px sans que personne l'ait demandé, et Thomas l'a vu sur l'accueil (pastille 170 → 146, titre 232 → 208). Il n'y avait que sur les ARTICLES qu'il jugeait l'écart trop grand. ⚠️ Les trois classes couvrent tout le blog et rien d'autre — relevé sur les pages servies : index `blog`, archives `archive category`, articles `single single-post`. L'accueil porte `home page`, les autres `page`. ⚠️ Chaque sélecteur pèse (0,2,1) contre (0,1,0) à WordPress. Ne pas l'alléger : à une seule classe on serait à égalité, tranchée par l'ordre d'insertion des feuilles. */ .px-entete ~ main{padding-top:var(--px-entete-h,88px)} .blog .px-entete ~ main, .category .px-entete ~ main, .single-post .px-entete ~ main{margin-block-start:0} .px-nav{display:flex;align-items:center;gap:34px;padding:20px 0;border-bottom:1px solid var(--px-rule)} /* ⭐ Le mot composé en Unbounded cède la place au vrai logo. Sur une image, les règles de typographie ne servent plus à rien — on ne cale que la HAUTEUR, seule dimension qui compte : la largeur suit toute seule le rapport 4,116 du fichier. Et `display:flex` évite l'espace fantôme que la ligne de base réserve sous une image en ligne. ⭐ PORTÉ À 25 px LE 2026-08-21 (+13,6 %), 23 px sous 900. Demande de Thomas, après avoir comparé 22, 24,2 et 25,3 px sur rendu réel à 1280 et 375. ⚠️ 25 et non 25,3 : une hauteur à décimale fait rendre l'image sur un tiers de pixel, donc légèrement floue selon l'écran. L'écart au +15 % exact est de trois dixièmes de pixel — invisible. ⭐ Et la BARRE NE BOUGE PAS : mesurée à 87 px sur ordinateur et 72 sur mobile aux trois tailles essayées. Sa hauteur vient des boutons (47 px) et du burger (44 px), jamais du logo. ⚠️⚠️ LA HAUTEUR NE SE REPREND PAS D'UN LOGO À L'AUTRE. Au logo de 2026-08-19, le mot est dessiné à la MÊME taille qu'avant (782 unités dans les deux fichiers) mais l'emblème monte bien plus haut : il occupe 973 unités contre 838, et le mot ne pèse plus que 78,8 % de la boîte au lieu de 91,4 %. Reprendre 19 px aurait donc rétréci « PRISM » de 13,7 % sans que rien ne le signale — la boîte, elle, aurait eu la bonne hauteur. Ce qu'on cale, c'est LE MOT, pas la boîte. ⭐ Mis à jour le 2026-08-21 avec la version « trame » : la boîte fait 4021 × 977 et le mot y pèse 80,0 %, contre 78,8 % avant — à 22 px il passe donc de 17,34 à 17,61 px, soit +1,5 %, sous le seuil de perception. La HAUTEUR ne bouge pas, mais la LARGEUR si : 89 → 91 px, sinon la page saute au chargement. Mesuré au `getBBox()`, pas déduit du viewBox — le viewBox ne dit pas où s'arrêtent les lettres. La barre ne bouge pas pour autant : sa hauteur est donnée par les boutons (≈43 px), pas par le logo. */ .px-nav .logo{display:flex;align-items:center} .px-nav .logo img{display:block;height:25px;width:auto} .px-nav menu{display:flex;gap:26px;list-style:none;margin:0 0 0 18px;padding:0} /* ⚠️ Un cran plus clair que --px-ink-3 depuis que la barre est transparente : une lueur du fond passant dessous faisait tomber les liens à 4,19 de contraste, sous le seuil de 4,5. Mesuré à 5,32 dans ce même pire cas. */ .px-nav menu a{font-size:13.5px;font-weight:600;color:#8A93A1} .px-nav menu a:hover{color:var(--px-ink)} /* Les entrées dont la page n'existe pas encore : même graisse, même taille, mais éteintes et sans curseur de lien. Un menu inerte vaut mieux qu'un lien qui ne mène nulle part. */ .px-nav menu .attente{font-size:13.5px;font-weight:600;color:var(--px-eteint);cursor:default} .px-nav .droite{margin-left:auto;display:flex;gap:10px;align-items:center} /* ── LE MENU MOBILE ─────────────────────────────────────────────────────── Sous 900 px, les quatre entrées et les deux boutons ne tiennent plus : ils passaient à la ligne et la barre faisait trois étages. Tout part dans un panneau, derrière un bouton. */ .px-burger{display:none;margin-left:auto;width:44px;height:44px;padding:0; align-items:center;justify-content:center;flex-direction:column;gap:5px; background:rgba(255,255,255,.04);border:1px solid var(--px-rule); border-radius:12px;cursor:pointer} .px-burger span{display:block;width:17px;height:1.5px;border-radius:1px;background:var(--px-ink-2); transition:transform .28s cubic-bezier(.3,.7,.3,1),opacity .2s ease} /* Ouvert, les trois traits deviennent une croix. */ .px-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .px-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .px-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} @media(prefers-reduced-motion:reduce){.px-burger span{transition:none}} /* ⛔⛔ LE PANNEAU N'AVAIT AUCUNE LIMITE LISIBLE, ET LE COUPABLE ÉTAIT UN RÉGLAGE VOULU. Remarque de Thomas le 2026-08-20 : « on ne fait aucune différence avec le reste de l'écran ». Le verre ne le gêne pas — le texte derrière est assez flouté — c'est le BORD qui manquait. La cause : `.px-entete::after` étale un fondu de 118 px sous l'en-tête, treize arrêts sur une décroissance exponentielle, réglé au millimètre POUR QUE LE BORD NE SE VOIE PAS (son propre commentaire : « trop court pour que la descente passe inaperçue »). Excellent sous une barre fine posée sur du contenu qui défile ; exactement contraire au besoin quand le panneau est ouvert. Et le `border-bottom:1px` d'ici s'y noyait — `--px-rule` ne pèse que 7,5 % de blanc. ⭐ La parade suit la grammaire du site plutôt que d'inventer : « la couleur arrive par un bord et s'éteint ». Le filet REPREND la forme exacte de celui de la barre (`.px-entete .px-nav::after`) — même dégradé qui se meurt aux deux extrémités, même largeur que le contenu — simplement trois fois plus marqué, parce qu'il ferme une surface et non une ligne. */ .px-menu-mobile{display:none;position:relative;padding:18px 0 26px} .px-menu-mobile::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22) 18%, rgba(255,255,255,.22) 82%,transparent)} .px-menu-mobile ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .px-menu-mobile li{border-bottom:1px solid var(--px-rule)} .px-menu-mobile li:last-child{border-bottom:0} .px-menu-mobile a,.px-menu-mobile .attente{display:block;padding:15px 2px; font-family:var(--f-accroche);font-size:16px;font-weight:600;color:var(--px-ink)} .px-menu-mobile .attente{color:var(--px-eteint)} .px-menu-mobile .actions{display:flex;flex-direction:column;gap:10px;margin-top:20px} .px-menu-mobile .px-btn{width:100%;text-align:center;padding:15px 20px} @media(max-width:900px){ .px-nav{gap:14px;padding:14px 0} .px-nav menu,.px-nav .droite{display:none} .px-burger{display:flex} .px-menu-mobile{display:block} /* ⚠️ `hidden` doit l'emporter sur le `display:block` ci-dessus, sinon le panneau serait ouvert en permanence. */ .px-menu-mobile[hidden]{display:none} /* ⭐⭐ MENU OUVERT, LA PAGE DERRIÈRE S'ASSOMBRIT. Deuxième retour de Thomas le 2026-08-20 : le filet seul « ne change rien », il faut « un fondu sur l'écran de derrière ». Il a raison, et le premier essai se trompait de cible : un bord dit où le panneau s'arrête, il ne dit pas que le reste est PASSÉ DERRIÈRE. C'est l'écart de luminosité qui le dit. ⭐ Le même élément sert — celui qui étalait déjà le fondu de 118 px sous la barre. Il n'y a donc rien de neuf à empiler : la règle change sa hauteur et sa courbe, et tout revient seul à la fermeture. ⭐ Un DÉGRADÉ et non un voile uniforme, en deux sens : c'est ce que Thomas a demandé, et c'est la grammaire du site — la couleur arrive par un bord et s'éteint. Il part presque opaque juste sous le panneau, là où la limite doit se lire, et se meurt vers le bas sans jamais montrer d'arête. Il reste 14 % en bas d'écran : à zéro, le pied de la page retrouvait sa pleine lumière et redevenait un plan concurrent. ⭐⭐ ET LE VOILE CAPTE LES CLICS — demandé par Thomas le 2026-08-20. ⚠️ `pointer-events:auto` n'est pas seulement ce qui permet de fermer : c'est surtout ce qui EMPÊCHE le doigt d'atteindre la page dessous. Laissé en `none`, une touche sur le voile traversait et pouvait suivre un lien du contenu masqué — le visiteur croyait fermer le menu et changeait de page. Le défaut existait déjà avant le voile ; il devenait certain une fois le voile visible et donc désigné comme cible. ⚠️ Un pseudo-élément ne porte pas d'écouteur : le clic est rapporté à `.px-entete`, et c'est `prism.js` qui décide — voir « Le menu mobile ». */ .px-entete:has(.px-burger[aria-expanded="true"])::after{ pointer-events:auto; height:100vh; background:linear-gradient(180deg, color-mix(in srgb,var(--px-bg) 92%,transparent) 0%, color-mix(in srgb,var(--px-bg) 84%,transparent) 10%, color-mix(in srgb,var(--px-bg) 72%,transparent) 22%, color-mix(in srgb,var(--px-bg) 56%,transparent) 38%, color-mix(in srgb,var(--px-bg) 40%,transparent) 56%, color-mix(in srgb,var(--px-bg) 26%,transparent) 76%, color-mix(in srgb,var(--px-bg) 14%,transparent) 100%)} /* 23 px depuis le 2026-08-21 (voir la règle d'ordinateur ci-dessus). Le burger fait 44 px, donc la barre ne bouge toujours pas. */ .px-nav .logo img{height:23px} } /* boutons */ .px-btn{display:inline-block;font-family:var(--f-texte);font-size:14px;font-weight:700; letter-spacing:-.01em;padding:13px 22px;border-radius:var(--px-r-sm);border:0;cursor:pointer; color:var(--px-bg);background:var(--px-ink);transition:.16s} .px-btn:hover{background:#fff;box-shadow:0 0 26px -8px rgba(255,255,255,.5)} /* ⚠️ Texte blanc sur le cyan : demandé par Thomas, et mesuré à 2,0:1 — la norme d'accessibilité en demande 4,5:1 pour du texte de cette taille. Le texte sombre qu'il remplace était à 8,0:1. Le poids 700 et la taille limitent la casse ; le fond de survol est assombri plutôt qu'éclairci, sinon le blanc y devient franchement illisible. */ .px-btn.cy{background:var(--px-cy);color:#fff} .px-btn.cy:hover{background:#12B4D0;box-shadow:0 0 28px -8px rgba(25,200,230,.9)} .px-btn.ghost{background:var(--px-ctl);border:1px solid var(--px-ctl-bd);color:var(--px-ink-2);box-shadow:none} .px-btn.ghost:hover{color:var(--px-ink);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)} /* ── HÉROS — direction B, composition asymétrique ────────────────────────── */ .px-hero{display:grid;grid-template-columns:1fr 1.06fr;gap:52px;align-items:center;padding:104px 0 0} .px-hero h1{font-family:var(--f-titre);font-size:clamp(26px,3.2vw,42px);font-weight:700; letter-spacing:-.05em;line-height:1.12;margin:22px 0 0} .px-hero h1 em{font-style:normal;background:linear-gradient(96deg,#8FE9F8,#6E6BFF); -webkit-background-clip:text;background-clip:text;color:transparent} .px-hero .sous{font-family:var(--f-accroche);margin:22px 0 0;font-size:16px;line-height:1.6; color:var(--px-ink-2);max-width:48ch} .px-hero .actions{display:flex;gap:11px;margin-top:42px;flex-wrap:wrap} .px-rassure{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:32px} .px-rassure .px-card{padding:15px 16px} .px-rassure .px-lbl{font-size:9.5px;margin-bottom:7px} .px-rassure b{font-family:var(--f-titre);font-size:12.5px;font-weight:600;letter-spacing:-.035em;color:var(--px-ink)} /* l'écran produit, qui déborde à droite */ .px-scene{position:relative;margin-right:-120px} /* ⚠️ LE PANNEAU DOIT SE LIRE COMME UN ÉCRAN ALLUMÉ. Avec la surface commune des cartes — sombre et très transparente sur un fond sombre — il s'éteignait : « c'est plat, ça fait penser à un pauvre tableau de bord ». Vérifié à l'écran, opacité à 1, ce n'était pas l'animation mais bien la surface. Il prend donc une surface plus claire et plus opaque, et une lueur cyan sous lui. C'est le seul endroit de la page qui déroge à la carte commune, et c'est justifié : partout ailleurs la carte est un support, ici elle représente le produit. */ .px-scene>.px-card{padding:0;overflow:hidden; background:linear-gradient(168deg,rgba(56,76,96,.74),rgba(11,17,24,.95) 64%); box-shadow:0 1px 0 rgba(255,255,255,.09) inset, 0 40px 90px -48px rgba(25,200,230,.45), 0 30px 70px -40px #000} .px-scene>.px-card::after{background:var(--px-lin-on)} .px-scene>.px-card:hover{transform:none} /* Les chiffres du panneau remontent d'un cran : ce sont eux qu'on doit voir de loin, pas la grille du graphe. */ .px-scene .principal .px-num{color:#fff} .px-scene .cote .px-mini b{color:var(--px-ink)} .px-scene .barre span{color:var(--px-ink-2)} .px-scene .barre{display:flex;align-items:center;gap:9px;padding:12px 17px;border-bottom:1px solid var(--px-rule)} .px-scene .pt{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.13);display:block} .px-scene .barre span{margin-left:5px;font-size:11.5px;color:var(--px-ink-3);font-weight:600} .px-scene .corps{display:grid;grid-template-columns:1fr 200px} .px-scene .principal{padding:20px 22px;border-right:1px solid var(--px-rule);position:relative} .px-scene .principal::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(226,244,250,.055) 1px,transparent 1px);background-size:15px 15px} .px-scene .principal>*{position:relative;z-index:1} .px-scene .cote{padding:20px 18px;display:flex;flex-direction:column;gap:16px} .px-scene .px-num{font-size:30px} .px-mini{display:flex;flex-direction:column;gap:10px;margin:0} .px-mini div{display:flex;justify-content:space-between;font-size:12px;color:var(--px-ink-3)} .px-mini b{color:var(--px-ink-2);font-weight:650} .px-flottant{position:absolute;left:-64px;bottom:-40px;width:260px} /* ⚠️ Elle chevauche le graphe : avec la surface commune, semi-transparente, la courbe passait au travers et le texte devenait pénible à lire. Fond presque opaque ET flou d'arrière-plan — le flou seul ne suffit pas, il adoucit sans masquer. */ .px-flottant .px-card{padding:15px 17px; background:linear-gradient(168deg,rgba(32,46,60,.93),rgba(9,14,20,.97) 62%); backdrop-filter:blur(16px) saturate(1.1)} .px-flottant p{font-size:13px;line-height:1.5;color:var(--px-ink-2);margin:9px 0 0} .px-flottant p b{color:var(--px-ink);font-weight:650} /* ── CONNECTEURS — la section juste sous le héros ─────────────────────────── */ .px-plug{margin-top:126px;display:flex;align-items:center;gap:30px;flex-wrap:wrap; padding:22px 26px;border-radius:var(--px-r);background:rgba(255,255,255,.022); border:1px solid var(--px-rule)} .px-plug ul{list-style:none;display:flex;gap:34px;flex-wrap:wrap;margin:0 0 0 auto;padding:0} .px-plug li{font-size:15px;font-weight:650;color:var(--px-ink-3)} /* ── LE PIED DE PAGE ────────────────────────────────────────────────────── Quatre colonnes. La marque tient la première, plus large, les trois autres sont des listes de liens. Les entrées dont la page n'existe pas encore restent éteintes plutôt que de mener nulle part — même règle qu'en haut. */ .px-pied{margin-top:130px;padding:54px 0 0;border-top:1px solid var(--px-rule); display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px} /* ⭐ LA COLONNE DE LA MARQUE OCCUPE SA PLACE — demande de Thomas, 2026-08-19. La grille étire ses quatre colonnes à la hauteur de la plus longue : celle de la marque faisait 376 × 224 px pour 67 px de contenu, soit 157 px de vide subi. Le bloc s'y centre donc dans les DEUX axes, et le logo passe de 22 à 60 px de haut. ⚠️ C'est un `flex` sur l'élément de grille, et non un `align-self:center` : il faut centrer le logo ET la signature l'un sous l'autre, pas déplacer la boîte. L'étirement de la grille est ce qui donne la hauteur de référence — le supprimer ferait retomber le bloc en haut de la colonne. */ .px-pied .marque{display:flex;flex-direction:column;justify-content:center; align-items:center;text-align:center} .px-pied .marque .logo{margin:0 0 10px} /* ⚠️ PLUS la hauteur de l'en-tête : ici on n'est pas dans une barre, on remplit une colonne. Le mot retombe à 47,3 px (782/992 × 60). */ .px-pied .marque .logo img{display:block;height:60px;width:auto} .px-pied .signature{font-family:var(--f-accroche);font-size:14px;line-height:1.6; color:var(--px-ink-3);margin:13px 0 0;max-width:30ch} /* ⭐ PRODUIT ET RESSOURCES DANS UNE SEULE COLONNE — 2026-08-20, demande de Thomas : c'est ce qui libère la quatrième pour les partenaires. ⚠️ L'écart entre les deux rubriques est plus grand que celui des liens (12 px) : sans ça, « Ressources » se lirait comme un lien de plus de la liste au-dessus au lieu d'un nouveau titre. */ .px-pied .colonne{display:flex;flex-direction:column;gap:34px} .px-pied .px-lbl{margin:0 0 17px} .px-pied ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .px-pied a{font-size:13.5px;font-weight:600;color:var(--px-ink-3)} .px-pied a:hover{color:var(--px-ink)} .px-pied .attente{font-size:13.5px;font-weight:600;color:var(--px-eteint);cursor:default} /* ── LA COLONNE DES PARTENAIRES — 2026-08-20 ────────────────────────────── ⭐ LES LÉGENDES NE SONT **PAS** DES `.px-lbl`, ET C'EST DÉLIBÉRÉ. Le sur-titre des trois autres colonnes est en petites capitales, 700, très interlettré, précédé d'un trait. Donner ce traitement à « Membre adhérent de » ferait lire DEUX rubriques dans cette colonne, alors que ce sont des légendes qui appartiennent à l'image du dessous. Elles sont donc l'inverse exact : bas de casse, poids normal, encre plus sourde, aucun trait. ⚠️ Elles se lisent avec le logo, pas avant lui : l'écart légende → image (7 px) est bien plus petit que l'écart image → légende suivante (26 px). C'est cette différence, et elle seule, qui dit lequel va avec lequel. ⭐ TOUT EST CENTRÉ, À TOUTES LES LARGEURS — demande de Thomas, 2026-08-20. Le centrage est posé UNE fois ici plutôt que répété dans chaque palier : c'est exactement ce qui a permis de retirer trois règles devenues redondantes sur `.px-pied .marque` la veille. */ .px-pied .partenaires{display:flex;flex-direction:column;align-items:center; text-align:center;gap:26px} .px-pied .partenaire{display:flex;flex-direction:column;align-items:center} .px-pied .partenaires .mention{margin:0 0 7px;font-size:12px;font-weight:500; line-height:1.4;color:var(--px-ink-4)} .px-pied .partenaires img{display:block;height:auto;max-width:100%} .px-pied-bas{margin-top:50px;padding:22px 0 46px;border-top:1px solid var(--px-rule); display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap} .px-pied-bas p{margin:0;font-size:12.5px;color:var(--px-ink-4)} @media(max-width:900px){ .px-pied{grid-template-columns:1fr 1fr;gap:36px;margin-top:96px} .px-pied .marque{grid-column:1/-1} } /* ⚠️ Le pied passait à UNE colonne sous 560 px : trois listes de deux à quatre liens s'empilaient sur toute la hauteur de l'écran. Demande de Thomas le 2026-08-13 — on garde DEUX colonnes, et la marque, qui occupe déjà toute la largeur depuis 900 px, se centre avec son logo. ⭐ Les trois règles qui centraient la marque ici ont été retirées le 2026-08-19 : elles sont devenues redondantes le jour où `.px-pied .marque` est passé en `flex` centré à TOUTES les largeurs. */ @media(max-width:560px){ .px-pied{grid-template-columns:1fr 1fr;gap:30px 24px} /* Le logo occupe 65 % de la colonne à 60 px ; sur un téléphone la colonne est l'écran entier, et il écraserait le reste du pied. */ .px-pied .marque .logo img{height:46px} /* Chaque colonne est centrée, son sur-titre compris. ⚠️ `.px-lbl` est un flex avec un trait en `::before` : `text-align` ne le déplace pas, il faut `justify-content`. */ .px-pied nav{text-align:center} .px-pied nav .px-lbl{justify-content:center} /* Le trait du `::before` est centré AVEC le texte, donc il le pousse de 23 px vers la droite : mesuré 53 à gauche contre 30 à droite. On le retire, comme le fait déjà `.px-pq-nom-seul` pour un sur-titre centré. */ .px-pied nav .px-lbl::before{display:none} .px-pied ul{align-items:center} /* ⭐ LES DEUX PARTENAIRES PASSENT CÔTE À CÔTE — demande de Thomas. ⚠️ ET IL FAUT `grid-column:1/-1` POUR ÇA. La colonne ne fait qu'une case de la grille à deux colonnes, soit ~150 px sur un écran de 375 : deux logos à 100 et 132 px n'y tiendraient pas, ils tomberaient à 65 px de large chacun. En occupant toute la largeur — comme le fait déjà la marque — la rangée dispose de ~330 px, et les deux gardent leur taille. ⚠️ `flex-wrap` est le filet : sous 320 px les 262 px de logos plus l'écart ne passent plus, et ils se remettent l'un sous l'autre au lieu de déborder. ⚠️ `align-items:flex-start` aligne les deux LÉGENDES sur la même ligne. Un centrage vertical les décalerait l'une par rapport à l'autre, les deux logos n'ayant pas du tout la même hauteur (113 px contre 41). */ .px-pied .partenaires{grid-column:1/-1;flex-direction:row;flex-wrap:wrap; justify-content:center;align-items:flex-start;gap:30px} } /* apparition au défilement */ /* ⚠️ C'était 1,25 s. Additionné au décalage ci-dessous, un bloc mettait jusqu'à 1,6 s à se poser — on le REGARDE apparaître au lieu de le lire, et ça se confond avec une page lente. 0,6 s reste un fondu, pas un à-coup. */ .px-rv{opacity:0;transform:translateY(30px); transition:opacity .6s cubic-bezier(.16,.72,.22,1),transform .6s cubic-bezier(.16,.72,.22,1)} .px-rv.px-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.px-rv{transition:none;opacity:1;transform:none}} @media(max-width:1080px){ .px-hero{grid-template-columns:1fr;gap:56px;padding-top:64px} .px-scene{margin-right:0} .px-flottant{position:static;width:auto;margin-top:12px} } @media(max-width:820px){ .px-rassure{grid-template-columns:1fr} .px-scene .corps{grid-template-columns:1fr} .px-scene .principal{border-right:0;border-bottom:1px solid var(--px-rule)} .px-nav menu{display:none} .px-plug ul{margin-left:0;gap:20px} } /* l'éditeur n'exécute pas les animations : on y montre l'état final */ .editor-styles-wrapper .px-rv{opacity:1;transform:none} /* ══════════════════════════════════════════════════════════════════════════ RACCORD AVEC LES BLOCS WORDPRESS Les textes du héros sont de vrais blocs, pour rester éditables. Il faut donc habiller le balisage que WordPress génère — c'est le seul endroit du thème où l'on écrit du CSS « pour WordPress » plutôt que pour le design. ══════════════════════════════════════════════════════════════════════════ */ .px-page :where(.wp-block-group){margin-block:0} .px-hero>.wp-block-group{min-width:0} .px-hero .wp-block-heading{font-family:var(--f-titre);font-size:clamp(26px,3.2vw,42px); font-weight:700;letter-spacing:-.05em;line-height:1.12;margin:22px 0 0} .px-hero .wp-block-heading em{font-style:normal; background:linear-gradient(96deg,#8FE9F8,#6E6BFF);-webkit-background-clip:text; background-clip:text;color:transparent} .px-hero p.sous{font-family:var(--f-accroche);margin:22px 0 0;font-size:16px; line-height:1.6;color:var(--px-ink-2);max-width:48ch} .px-hero .wp-block-buttons{gap:11px;margin-top:42px} .px-hero .wp-block-button__link{font-family:var(--f-texte);font-size:14px;font-weight:700; letter-spacing:-.01em;padding:13px 22px;border-radius:var(--px-r-sm);border:0; background:var(--px-cy);color:#04262C;transition:.16s} .px-hero .wp-block-button__link:hover{background:#5FD8EE;box-shadow:0 0 28px -8px rgba(25,200,230,.9)} .px-hero .wp-block-button.is-style-outline .wp-block-button__link{background:var(--px-ctl); border:1px solid var(--px-ctl-bd);color:var(--px-ink-2);box-shadow:none} .px-hero .wp-block-button.is-style-outline .wp-block-button__link:hover{color:var(--px-ink); border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)} .px-plug .wp-block-list{list-style:none;display:flex;gap:34px;flex-wrap:wrap; margin:0 0 0 auto;padding:0} .px-plug .wp-block-list li{font-size:15px;font-weight:650;color:var(--px-ink-3)} /* ── CONTENU LIBRE ──────────────────────────────────────────────────────── Les compositions apportent leur propre `.px-wrap`. Tout ce qui n'en a pas — un paragraphe tapé à la main, la liste des articles — serait collé au bord de l'écran. On le recentre ici, sans toucher aux compositions. */ .px-page>.wp-block-post-content>*:not(.px-wrap){max-width:1172px;margin-inline:auto;padding-inline:34px} /* Les sections de la page d'accueil gèrent déjà leur largeur avec leur `.px-wrap` intérieur : la contrainte ci-dessus les rétrécirait d'un cran et doublerait leur gouttière. */ .px-page>.wp-block-post-content>.px-sec{max-width:none;padding-inline:0} .px-liste{padding-top:64px} .px-liste .wp-block-post-title{font-family:var(--f-titre);letter-spacing:-.05em;line-height:1.14} .px-liste .wp-block-post-title a{color:var(--px-ink)} .px-liste .wp-block-post-title a:hover{color:var(--px-cy)} .px-liste .wp-block-post-date{font-size:12.5px;color:var(--px-ink-4);margin-top:6px} .px-liste .wp-block-post-excerpt{font-family:var(--f-accroche);color:var(--px-ink-2); margin-top:12px;max-width:70ch} .px-liste .wp-block-post-template>li+li{margin-top:44px;padding-top:44px; border-top:1px solid var(--px-rule)} /* ══════════════════════════════════════════════════════════════════════════ L'ARTICLE Tout ce qui suit s'applique SEUL, sans rien demander à la rédaction : le gabarit et cette feuille habillent ce que l'automate envoie. La règle de partage des polices vaut ici comme ailleurs — Unbounded pour le titre de l'article et lui seul, Geologica pour les intertitres (Unbounded à 700 au fil du texte serait illisible), Satoshi pour le corps. ══════════════════════════════════════════════════════════════════════════ */ /* — le fil d'Ariane — */ /* ⛔⛔ C'EST CETTE MARGE-LÀ QUI FAISAIT DESCENDRE L'ARTICLE, PAS CELLE DU HAUT. Thomas, 2026-08-21 : « je ne vois pas de différences ». Il avait raison — j'avais rétréci trois fois de suite l'écart barre → fil (52 → 34 → 16 → 8), qui est le PLUS PETIT de l'empilement, pendant que celui-ci en faisait 30. Relevé complet à ce moment : barre→fil 8 · fil→badge **30** · badge→titre 22 · titre→chapô 24. Rogner 8 px sur 147 ne se voit pas. ⭐ LA LEÇON : avant de retoucher un espacement qu'on trouve trop grand, MESURER TOUTE LA COLONNE. Le coupable est rarement celui qu'on regarde. ⚠️ 14 px sur ordinateur, 30 conservés sur téléphone (requête plus bas) — Thomas a validé le mobile tel quel, on n'y touche pas. */ .px-fil{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12px; font-weight:600;color:var(--px-ink-4);margin:0 0 14px} .px-fil a{color:var(--px-ink-3)} .px-fil a:hover{color:var(--px-ink)} .px-fil i{font-style:normal;opacity:.45} .px-fil>span{color:var(--px-ink-4);max-width:38ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* — le héros d'article — Le fond vivant fait le décor : le héros n'a donc besoin ni d'image ni de bloc coloré pour tenir. L'image mise en avant, quand il y en a une, vient en dessous — l'article doit être complet sans elle. */ /* ⛔⛔ `padding-top` ET NON LA NOTATION RACCOURCIE — retour de Thomas le 2026-08-21 : « le texte de l'article est collé aux bords de l'écran, ça donne clairement pas envie de lire ». `.px-wrap` pose les marges latérales de tout le site (`padding:0 34px`). Écrire `padding:52px 0 0` ici les REMETTAIT À ZÉRO : même poids (0,1,0), et placée plus bas, la règle gagnait. Le texte touchait donc les deux bords. ⚠️ Invisible au-delà de 1240 px, où le contenu est de toute façon centré dans sa largeur maximale — d'où un défaut qui a survécu à toutes les relectures sur grand écran. Il se voyait dès 1240 px et en dessous. ⭐⭐ ET CE N'EST PAS LA PREMIÈRE FOIS : le même défaut, sur le même mécanisme, a été trouvé et corrigé le 2026-08-13 sur `/contact/` (`.px-ccols`) — voir « CONTACT — MOBILE » plus bas. Il avait été réparé LÀ-BAS SEULEMENT, pas dans le motif. Deux gabarits partagent donc la même erreur, écrite deux fois. ⚠️ La correction est posée dans la requête média mobile et NON ici, pour suivre l'arbitrage déjà pris le 13 août : « ne rien déplacer sur desktop sans que ce soit demandé ». Sur grand écran, le contenu est de toute façon centré dans ses 1240 px. */ /* ⚠️ 34 px ET NON 52 — Thomas le 2026-08-21 : « sur desktop c'est encore trop comme écart inutile ». C'est la valeur déjà validée sur téléphone, où il m'a dit que c'était bon : les deux tailles d'écran ouvrent donc l'article de la même façon. Les 52 px dataient d'avant le retrait des 24 px parasites de WordPress — l'écart réel était de 76, et je n'avais jamais rejugé la valeur voulue une fois le parasite parti. */ /* ⚠️ 8 px SUR ORDINATEUR, 34 SUR TÉLÉPHONE (posé plus bas, dans la requête `max-width:1080px`). Les deux ne peuvent pas être identiques : l'en-tête fait 90 px de haut sur ordinateur contre 72 sur téléphone, et le même écart y pèse visuellement bien plus lourd. Thomas a validé 34 sur téléphone, puis fait descendre l'ordinateur en trois passes — 52, 34, 16 — jusqu'à 8. ⭐ Rappel de l'historique, pour ne pas remonter cette valeur par réflexe : l'écart réel valait 76 px tant que WordPress ajoutait ses 24 px parasites à `
`. Toute valeur choisie avant ce nettoyage est à rejuger, pas à reprendre. */ .px-ahero{padding:8px 0 0} .px-ahero .cat{display:flex;flex-wrap:wrap;gap:8px;margin:0} .px-ahero .cat a{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:#9FE4F2;border:1px solid var(--px-ctl-bd); border-radius:20px;padding:6px 13px;background:var(--px-ctl)} .px-ahero .cat a:hover{border-color:rgba(25,200,230,.4);color:#C8F2FA} .px-ahero .cat .wp-block-post-terms__separator{display:none} .px-ahero .wp-block-post-title{font-family:var(--f-titre);font-size:clamp(27px,3.4vw,44px); font-weight:700;letter-spacing:-.05em;line-height:1.13;color:var(--px-ink); margin:22px 0 0;max-width:21ch} .px-ahero .chapo,.px-ahero .chapo p{font-family:var(--f-accroche);font-size:17px;line-height:1.62; color:var(--px-ink-2);max-width:58ch} .px-ahero .chapo{margin:24px 0 0} .px-ahero .chapo p{margin:0} .px-ameta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px; font-size:12.5px;font-weight:600;color:var(--px-ink-4)} /* ⛔⛔ LA DATE ET LE TEMPS DE LECTURE N'ÉTAIENT PAS SUR LA MÊME LIGNE — Thomas le 2026-08-21, sur ordinateur ET sur téléphone. Décalage mesuré : 12 px exactement, la date plus haut que le reste. ⭐ Encore la feuille globale de WordPress, `margin-block-start:24px` sur tout enfant qui n'est pas le premier. Mesuré ici : marges 0 · 24 · 24. En flex `align-items:center`, c'est la boîte AVEC SA MARGE qui est centrée — la date (sans marge) se centre dans les 44 px et descend de 12, les deux autres partent de 24. D'où les 12 px d'écart, et un conteneur à 44 px de haut au lieu de 20. ⚠️ Le sélecteur porte DEUX classes (0,2,0) : `.px-ameta > *` seul ferait (0,1,0), à égalité avec WordPress, et c'est l'ordre d'insertion des feuilles qui trancherait — un pile ou face que le thème ne maîtrise pas. ⭐ TROISIÈME fois AUJOURD'HUI que cette règle mord, après `.px-bl-cats` et les 24 px sous l'en-tête. À suspecter en premier dès qu'un espacement vertical apparaît sans raison dans un groupe de blocs. */ .px-ahero .px-ameta > *{margin-block-start:0} .px-ameta i{font-style:normal;opacity:.45} .px-ameta .wp-block-post-date,.px-ameta .wp-block-post-date time{color:var(--px-ink-4)} .px-ahero .wp-block-post-featured-image{margin:44px 0 0} .px-ahero .wp-block-post-featured-image img{width:100%;height:auto;border-radius:var(--px-r); border:1px solid var(--px-rule)} .px-ahero::after{content:'';display:block;height:1px;background:var(--px-rule);margin-top:52px} /* — les deux colonnes — */ /* ⚠️ Même notation raccourcie qu'au-dessus, donc même effacement des 34 px latéraux de `.px-wrap` — et même correction, dans la requête média mobile. */ .px-acols{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:66px; align-items:start;padding:52px 0 0} /* ⛔⛔ LE POINT DE COLLAGE DOIT DÉGAGER LA BARRE FIXE. À `top:26px`, le sommaire se figeait 26 px sous le HAUT DE LA FENÊTRE — donc DERRIÈRE l'en-tête, qui en fait 90. Thomas le 2026-08-21 : « il s'arrête derrière la navigation alors qu'il devrait s'arrêter juste avant, à genre 10 px ». ⭐ La hauteur vient de `--px-entete-h`, mesurée par le script au chargement : le calage suit donc l'en-tête si sa hauteur change (logo agrandi, autre taille d'écran) sans qu'on ait à retoucher un nombre écrit à la main. ⚠️ Le repli à 88px sert au cas où le script ne tourne pas — jamais 26. */ .px-aside{position:sticky;top:calc(var(--px-entete-h,88px) + 10px); display:flex;flex-direction:column;gap:22px;min-width:0} /* le sommaire, construit au chargement à partir des intertitres */ .px-somm[hidden]{display:none} .px-somm .px-lbl{margin-bottom:14px} /* Un article très découpé ferait un sommaire plus haut que l'écran, dont le bas serait alors inatteignable : il défile dans sa propre boîte. */ .px-somm ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column; max-height:min(58vh,460px);overflow-y:auto;overscroll-behavior:contain} .px-somm li{border-left:1px solid var(--px-rule)} .px-somm a{display:block;padding:9px 0 9px 15px;font-size:13.5px;font-weight:600; line-height:1.4;color:var(--px-ink-3);transition:color .18s ease} .px-somm a:hover{color:var(--px-ink-2)} .px-somm li.px-ici{border-left-color:var(--px-cy)} .px-somm li.px-ici a{color:var(--px-ink)} /* l'encart de conversion — le seul endroit du blog qui mène au produit */ /* `:not(.px-lbl)` — sans lui, cette règle l'emporte sur `.px-lbl` (plus spécifique) et le micro-titre perdrait ses capitales. */ .px-encart p:not(.px-lbl){font-family:var(--f-accroche);font-size:14px;line-height:1.55; color:var(--px-ink-2);margin:10px 0 18px} .px-encart .px-btn{width:100%;text-align:center} /* ⚠️ L'encart n'a porté qu'UN bouton jusqu'au 2026-08-21 ; le second, ajouté à la demande de Thomas, se collait au premier — écart mesuré à 0. L'espace va sur le SECOND et non sous le premier : rien à défaire le jour où l'encart n'en portera qu'un. */ .px-encart .px-btn + .px-btn{margin-top:10px} /* ── LE CORPS DE L'ARTICLE ──────────────────────────────────────────────── Le rythme vertical n'est pas plat : un intertitre prend beaucoup d'air au-dessus et peu en dessous, sinon il flotte entre deux paragraphes sans qu'on sache lequel il annonce. */ .px-corps{font-size:16.5px;line-height:1.72;color:var(--px-ink-2);max-width:72ch} .px-corps>*{margin:0} .px-corps>*+*{margin-top:22px} .px-corps p{margin:0} .px-corps strong,.px-corps b{color:var(--px-ink);font-weight:700} .px-corps a{color:var(--px-cy);border-bottom:1px solid rgba(25,200,230,.35); transition:border-color .18s ease} .px-corps a:hover{border-bottom-color:var(--px-cy)} .px-corps h2{font-family:var(--f-accroche);font-size:clamp(21px,2.2vw,27px);font-weight:600; letter-spacing:-.02em;line-height:1.26;color:var(--px-ink);margin:64px 0 0;scroll-margin-top:26px} .px-corps h2::after{content:'';display:block;width:38px;height:2px;border-radius:2px; margin-top:16px;background:var(--px-cy);opacity:.85} .px-corps h2+*{margin-top:20px} .px-corps h3{font-family:var(--f-accroche);font-size:18.5px;font-weight:600;letter-spacing:-.015em; line-height:1.35;color:var(--px-ink);margin:42px 0 0;scroll-margin-top:26px} .px-corps h3+*{margin-top:12px} .px-corps>*:first-child{margin-top:0} .px-corps ul,.px-corps ol{margin:22px 0 0;padding-left:22px} .px-corps li+li{margin-top:9px} .px-corps li::marker{color:var(--px-ink-4)} .px-corps li>ul,.px-corps li>ol{margin-top:9px} .px-corps blockquote{margin:34px 0 0;padding:2px 0 2px 24px;border-left:2px solid var(--px-cy)} .px-corps blockquote p{font-family:var(--f-accroche);font-size:18px;line-height:1.55;color:var(--px-ink)} .px-corps blockquote cite{display:block;margin-top:12px;font-size:13px;font-style:normal;color:var(--px-ink-4)} .px-corps figure{margin:38px 0 0} .px-corps img{max-width:100%;height:auto;border-radius:var(--px-r-sm);border:1px solid var(--px-rule)} .px-corps figcaption{margin-top:11px;font-size:12.5px;line-height:1.5;color:var(--px-ink-4)} /* Le tableau déborde plutôt que d'écraser ses colonnes : il défile dans sa propre boîte, et la page ne défile jamais horizontalement. */ /* `:has(> table)` en plus de la classe : la publication automatique enveloppe ses tableaux dans un `figure` NU, sans `wp-block-table`. Sans cette seconde accroche, ses tableaux ne défileraient pas et casseraient la page sur mobile. */ .px-corps .wp-block-table,.px-corps figure.wp-block-table, .px-corps figure:has(> table){overflow-x:auto;max-width:100%} .px-corps table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px} .px-corps th,.px-corps td{padding:12px 16px;text-align:left;vertical-align:top; border-bottom:1px solid var(--px-rule);font-variant-numeric:tabular-nums} .px-corps thead th{font-family:var(--f-texte);font-size:10.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--px-ink-3);border-bottom-color:var(--px-ctl-bd)} .px-corps tbody tr:last-child td{border-bottom:0} .px-corps tbody td:first-child{color:var(--px-ink);font-weight:650} .px-corps .wp-block-table figcaption{margin-top:13px} .px-corps hr,.px-corps .wp-block-separator{margin:44px 0 0;height:1px;border:0; background:var(--px-rule);width:100%} .px-corps small{font-size:12.5px;line-height:1.5;color:var(--px-ink-4)} /* Le bloc « Détails » du cœur — c'est lui qui fait les questions fréquentes. */ .px-corps details{margin-top:14px;border-bottom:1px solid var(--px-rule);padding-bottom:14px} .px-corps details summary{cursor:pointer;list-style:none;font-family:var(--f-accroche); font-size:15.5px;font-weight:600;color:var(--px-ink);padding-right:26px;position:relative} .px-corps details summary::-webkit-details-marker{display:none} .px-corps details summary::after{content:'+';position:absolute;right:0;top:-2px; font-size:19px;font-weight:400;color:var(--px-ink-3)} .px-corps details[open] summary::after{content:'−'} .px-corps details>*+*{margin-top:14px} /* — le pied d'article : d'autres lectures de la même catégorie — */ .px-suite{padding:96px 0 0} .px-suite .px-lbl{margin-bottom:22px} .px-suite ul{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(3,1fr);gap:16px} .px-suite .px-card{display:flex;flex-direction:column;gap:11px;height:100%} .px-suite .k{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--px-ink-4)} .px-suite h3{font-family:var(--f-accroche);font-size:16px;font-weight:600;line-height:1.36; letter-spacing:-.015em;color:var(--px-ink);margin:0} .px-suite a:hover h3{color:var(--px-cy)} .px-suite time{font-size:12px;color:var(--px-ink-4);margin-top:auto} /* ══════════════════════════════════════════════════════════════════════════ LA PAGE D'ACCUEIL DU BLOG — 2026-08-21 Direction choisie par Thomas sur banc : grille pure, tous les articles au même rang, précédée du héros du site et d'un filtre par catégorie. ⭐ RIEN N'EST DESSINÉ DE NEUF. Le héros est `.px-hero.px-hero-centre`, celui des autres pages ; la carte est `.px-card`, celle du bloc « À lire ensuite » du pied d'article. Ce bloc ne fait que les DISPOSER et leur ajouter l'image, le badge coloré et la durée. ⚠️ Les archives de catégorie passent par le MÊME gabarit (le thème n'a pas de `category.html`) : ces règles servent donc les deux pages. ══════════════════════════════════════════════════════════════════════════ */ /* ── UNE COULEUR PAR CATÉGORIE ────────────────────────────────────────── C'est la DISPERSION du site, dont la définition est de « distinguer les éléments d'une même série ». La table slug → teinte vit dans `prism_couleur_categorie()`, côté PHP : une seule source. ⚠️ `s5` est le CYAN, employé pour « Prism en pratique » sur décision de Thomas — la catégorie de la marque. Exception assumée, à ne pas étendre : ailleurs le cyan doit continuer de vouloir dire « ceci se clique ». */ .px-bl-cat.s1,.px-bl-badge.s1{--c:var(--px-s1)} .px-bl-cat.s2,.px-bl-badge.s2{--c:var(--px-s2)} .px-bl-cat.s3,.px-bl-badge.s3{--c:var(--px-s3)} .px-bl-cat.s4,.px-bl-badge.s4{--c:var(--px-s4)} .px-bl-cat.s5,.px-bl-badge.s5{--c:var(--px-s5)} .px-bl-cat.s6,.px-bl-badge.s6{--c:var(--px-s6)} .px-bl-hero{padding-top:118px} /* ⛔⛔ `white-space:normal` — SANS ÇA LE CHAPÔ DÉBORDE L'ÉCRAN. `.px-hero-centre` pose `nowrap` sur le titre ET sur `.sous` : ses chapôs à lui tiennent en une ligne voulue. Celui du blog fait quatre phrases, il en aurait fait UNE de 370 caractères, et le débordement horizontal que Thomas a signalé sur les articles serait revenu par la fenêtre. ⭐ Rien d'inventé : c'est exactement le traitement de `.px-offres-tete`, la seule autre tête du site à porter un chapô long — même mesure de 74ch, même corps, même interligne. ⚠️ Le titre passe en `normal` lui aussi : le `
` continue de donner les deux lignes voulues, mais sous 340 px les mots peuvent enfin se replier au lieu de pousser la page vers la droite. `balance` égalise les deux lignes. ⛔ LES TROIS CLASSES SONT OBLIGATOIRES. `.px-bl-hero h1` seul fait 0,1,1 contre 0,2,1 à la règle `nowrap` — il perdait, et il est en plus DEVANT elle dans le fichier, donc il perdait deux fois. Le fichier prévient déjà de ce piège au bloc `.px-hero-centre`. Ne pas raccourcir ces sélecteurs. */ /* ⛔ LE TITRE DESCEND AU CORPS DES PAGES SECONDAIRES — mesuré le 2026-08-21 à 1265 px : l'accueil est à 51,8 px, « Nos offres » à 46, « Affiliation » à 47,4. Le blog héritait des 51,8 de l'ACCUEIL alors que c'est une page secondaire comme les deux autres. Valeurs reprises de `.px-offres-tete`. ⚠️ Ce sélecteur pèse (0,3,1), soit PLUS que la règle mobile du thème `.px-hero.px-hero-centre h1` (0,2,1) : sans l'override posé plus bas dans `@media(max-width:620px)`, ce `clamp` serait descendu à 28 px sur téléphone au lieu des 34 px de toutes les autres pages. Neuvième fois que ce piège mord ce fichier. Les deux règles vont ENSEMBLE. */ .px-hero.px-hero-centre.px-bl-hero h1{white-space:normal;text-wrap:balance; font-size:clamp(28px,3.6vw,46px);line-height:1.16} .px-hero.px-hero-centre.px-bl-hero p.sous:not(.sous-2){white-space:normal; max-width:74ch;font-size:16.5px;line-height:1.68;margin-top:30px} /* ── LE FILTRE ────────────────────────────────────────────────────────── ⚠️ CE SONT DE VRAIS LIENS vers les archives, pas un filtre en JavaScript : ils fonctionnent sans script, et chaque catégorie garde une adresse partageable et indexable. */ /* ⚠️ 54 px ET NON 32 — retour de Thomas le 2026-08-21 : « tu décolles la ligne de boutons du sous-titre, là ça fait pas propre ». Le chapô fait désormais trois lignes ; à 32 px la rangée semblait lui appartenir au lieu d'ouvrir la grille. L'écart est maintenant plus grand que celui qui sépare le chapô du titre (30 px), ce qui range bien les boutons DU CÔTÉ des articles. ⛔⛔ `padding-top` ET NON `margin-top` — LA MARGE EST ÉCRASÉE PAR WORDPRESS. Mesuré : chapô et rangée tombaient tous deux à 403 px, écart réel de ZÉRO, alors que le `display:flex` de la MÊME règle s'appliquait. Le coupable est la feuille de styles globaux de WordPress : :root :where(.is-layout-flow) > :first-child{margin-block-start:0} Elle pèse (0,2,0) — `:root` compte, `:where()` non — contre (0,1,0) à `.px-bl-cats`. Et cette rangée EST le premier enfant de son groupe. ⭐ Surenchérir en spécificité aurait donné une égalité à (0,2,0) tranchée par l'ordre d'insertion des feuilles, que le thème ne maîtrise pas. Le `padding` n'est pas dans le champ de cette règle : plus de course. */ /* ── UNE SEULE LIGNE QUI DÉFILE — demande de Thomas le 2026-08-21 ──────── Onze catégories tenaient sur deux rangées de 9 puis 3, et la seconde, très courte, se lisait comme un reste. Le rang défile donc au lieu de se replier. ⭐ LA LARGEUR EST CELLE DU CHAPÔ, mais `74ch` ne se recopie PAS tel quel : l'unité `ch` dépend de la police ET du corps de l'élément QUI LA PORTE. Sur des pastilles à 12,5 px en `--f-texte`, les mêmes 74ch auraient donné une tout autre largeur. Le conteneur emprunte donc la police et le corps du chapô — les pastilles gardent les leurs, `.px-bl-cat` les repose juste après. Mesuré identique au chapô : 829 px. ⛔ LE RANG COMMENCE À GAUCHE, IL N'EST PAS CENTRÉ — Thomas le 2026-08-21 : « il faut que la ligne commence au début et pas centrée ». La BOÎTE reste centrée sous le chapô (`margin-inline:auto`), c'est son CONTENU qui part du bord gauche, aligné sur la première lettre du texte au-dessus. ⚠️ Cet alignement au début règle aussi, gratuitement, le piège du centrage sur un conteneur qui défile : un `justify-content:center` rend le DÉBUT du contenu inatteignable dès que ça déborde — on ne peut plus remonter jusqu'à la première pastille. Ne pas y revenir. */ .px-bl-cats{display:flex;flex-wrap:nowrap;gap:9px;padding-top:54px; font-family:var(--f-accroche);font-size:16.5px;max-width:74ch;margin-inline:auto; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; justify-content:flex-start; scrollbar-width:none;-ms-overflow-style:none} /* La barre de défilement est cachée : ce qui dit qu'on peut faire glisser, c'est la pastille coupée au bord — l'affordance d'un carrousel. */ .px-bl-cats::-webkit-scrollbar{display:none} /* ⭐ Sur ordinateur les deux rangs s'effacent : `display:contents` fait remonter les pastilles comme enfants directs du conteneur, qui n'en fait donc qu'une seule ligne. Le HTML est le même sur toutes les tailles. */ .px-bl-rang{display:contents} /* ── LE FONDU SUR LES CÔTÉS ────────────────────────────────────────────── Retour de Thomas : « il manque une petite ombre pour fluidifier ». Une pastille tranchée net au bord fait accident ; en fondu, elle dit qu'il y a une suite. ⛔ IL EST POSÉ CÔTÉ PAR CÔTÉ, PAS EN PERMANENCE. Un masque fixe sur les deux bords estomperait la PREMIÈRE pastille alors qu'on est déjà au début du rang — ça se lit comme un défaut d'affichage, pas comme une invitation. `data-glisse` est écrit par le script au défilement : « gauche » quand il reste quelque chose derrière, « droite » quand il reste devant. ⚠️ Rien du tout quand le rang tient en entier — c'est le cas d'aujourd'hui avec cinq catégories, et il ne doit RIEN se passer. ⚠️ `-webkit-mask-image` en plus de la version standard : Safari ne suit toujours pas la propriété sans préfixe pour les dégradés. */ .px-bl-cats[data-glisse]{--px-bl-fondu:30px} .px-bl-cats[data-glisse="droite"]{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--px-bl-fondu)),transparent 100%); mask-image:linear-gradient(90deg,#000 calc(100% - var(--px-bl-fondu)),transparent 100%)} .px-bl-cats[data-glisse="gauche"]{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--px-bl-fondu)); mask-image:linear-gradient(90deg,transparent 0,#000 var(--px-bl-fondu))} .px-bl-cats[data-glisse="les-deux"]{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--px-bl-fondu), #000 calc(100% - var(--px-bl-fondu)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--px-bl-fondu), #000 calc(100% - var(--px-bl-fondu)),transparent 100%)} /* ⚠️ `flex:0 0 auto` et `white-space:nowrap` : dans un rang qui défile, une pastille qui a le droit de rétrécir se fait écraser au lieu de sortir du cadre — « Animation commerciale » repassait sur deux lignes de texte. Elles gardent leur largeur, et c'est le rang qui glisse. ⭐ La police et le corps sont reposés ICI : le conteneur porte ceux du chapô pour que sa mesure en `ch` corresponde, et les pastilles reprennent les leurs juste après. */ /* `--o` est le rang d'origine, écrit par le PHP. Il rétablit la suite voulue sur ordinateur, où les deux rangs du HTML sont mis à plat. */ .px-bl-cat{order:var(--o,0);flex:0 0 auto;white-space:nowrap;text-align:center; font-family:var(--f-texte);font-size:12.5px;font-weight:600; padding:9px 16px;border-radius:999px; color:var(--c,var(--px-ink-3));border:1px solid var(--c,var(--px-rule)); background:transparent;transition:background-color .18s ease,color .18s ease} /* Le survol pose un voile de la couleur ; l'état actif la pose PLEINE. */ .px-bl-cat:hover{background:color-mix(in srgb,var(--c,var(--px-ink-3)) 14%,transparent)} /* ⛔ APLAT PLEIN À L'ÉTAT ACTIF — demande de Thomas le 2026-08-21 : « faut que celle-ci soit en état validé donc plein ». Le contour seul ne distinguait pas assez la catégorie en cours du reste de la rangée. ⚠️ TEXTE SOMBRE, PAS BLANC. Les six teintes sont claires : mesuré contre `--px-bg`, le rapport va de 5,83 (s2 violet, le pire) à 11,74 (s4 vert) — tous au-dessus de 4,5. En blanc, cinq des six tombaient SOUS 3. ⚠️ Vient APRÈS `:hover`, à spécificité égale : survoler la pastille active ne la relave donc pas. Ne pas remonter cette règle. */ .px-bl-cat.on{background:var(--c,var(--px-ink-3));color:var(--px-bg); border-color:var(--c,var(--px-ink-3))} /* Blanc et non gris : « Tous les articles » n'est pas une catégorie de moindre importance, c'est l'état par défaut de la page. Demande de Thomas. */ .px-bl-cat.tout{--c:var(--px-ink)} /* ── LA GRILLE ────────────────────────────────────────────────────────── ⚠️ `minmax(0,1fr)` et non `1fr` : cinquième instance du piège sur ce projet. Un `1fr` ne peut pas rétrécir sous son contenu, et une image large suffirait à élargir toute la page. */ .px-bl-grille{list-style:none;margin:44px 0 0;padding:0;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .px-bl-grille .px-card{display:flex;flex-direction:column;height:100%; border:1px solid var(--px-rule);border-radius:var(--px-r);overflow:hidden; background:rgba(255,255,255,.02)} .px-bl-grille .visuel{display:block;aspect-ratio:16/9;overflow:hidden} .px-bl-grille .v{width:100%;height:100%;object-fit:cover;display:block} /* Le repli sans image montre la CATÉGORIE, jamais une fausse photo. */ .px-bl-repli{display:flex;align-items:center;justify-content:center; background:linear-gradient(150deg,rgba(36,50,64,.7),rgba(10,15,21,.9))} .px-bl-repli i{font-family:var(--f-texte);font-size:11px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--px-ink-4);font-style:normal} .px-bl-badge{align-self:flex-start;font-family:var(--f-texte);font-size:10px; font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:5px 10px;border-radius:999px;margin:16px 16px 9px; color:var(--c);border:1px solid var(--c);background:transparent} .px-bl-grille h2{font-family:var(--f-accroche);font-size:16.5px;font-weight:600; line-height:1.36;letter-spacing:-.015em;color:var(--px-ink);margin:0 16px 10px} .px-bl-grille .chapo{font-size:13.5px;line-height:1.55;color:var(--px-ink-3);margin:0 16px 12px} .px-bl-grille .meta{font-size:11.5px;color:var(--px-ink-4);margin:auto 16px 16px; display:flex;align-items:center;gap:7px} .px-bl-grille .px-card:hover h2{color:var(--px-cy)} .px-bl-vide{margin:44px 0 0;font-size:15px;color:var(--px-ink-3)} .px-bl-pages{margin-top:44px;display:flex;justify-content:center;gap:12px; font-size:13.5px;color:var(--px-ink-3)} @media(max-width:900px){ .px-bl-grille{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:640px){ .px-bl-hero{padding-top:92px} .px-bl-grille{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:34px} /* Sur téléphone, le rang défile sur DEUX lignes — demande de Thomas. La grille en flux « colonne » remplit de haut en bas puis passe à droite : c'est ce qui donne deux lignes qui glissent ensemble, là où un flex en `wrap` aurait rendu le défilement impossible. ⚠️ `max-width:none` : la mesure du chapô n'a plus de sens ici, c'est la largeur du `.px-wrap` qui borne. */ /* ⛔⛔ DEUX RANGS EN FLEX, ET SURTOUT PLUS DE GRILLE — 2026-08-21. La grille en flux « colonne » avait déjà été corrigée par `justify-items:start` pour rendre aux pastilles leur largeur naturelle, mais le vrai défaut restait : une COLONNE prend la largeur de la plus large de ses deux pastilles, et la plus courte laisse le reste en trou. « Actualités » sous « Tous les articles » en laissait 34 px, et Thomas l'a vu tout de suite : « y'a des gros espaces entre certaines vignettes ». ⭐ Ce n'est pas réglable : la largeur des colonnes EST le mécanisme de la grille. Il faut deux rangs indépendants — ils viennent du HTML, et `display:contents` les efface sur ordinateur. ⚠️ `width:max-content` sur les rangs : dans une colonne flex, un enfant se ferait sinon borner à la largeur du conteneur au lieu de déborder, et il n'y aurait plus rien à faire glisser. */ .px-bl-cats{gap:7px;padding-top:40px;max-width:none; display:flex;flex-direction:column;align-items:flex-start} .px-bl-rang{display:flex;gap:7px;width:max-content;flex:0 0 auto} .px-bl-cat{font-size:12px;padding:8px 13px} } @media(max-width:1080px){ /* ⛔⛔ `minmax(0,1fr)` ET NON `1fr` — QUATRIÈME INSTANCE DE CE PIÈGE sur ce projet, après le `fieldset`, la barre d'onglets et `.px-pq-duo`. Un `1fr` a un minimum implicite de `auto` : la piste NE PEUT PAS rétrécir sous la largeur intrinsèque de son contenu. Le tableau d'un article réclame 520 px — la colonne les prenait, et TOUTE LA PAGE s'élargissait. Mesuré sur `/blog/comment-etre-rentable…` à 375 px : 520 px de large, soit 145 px de débordement, et le lecteur pouvait faire glisser la page. ⚠️ La version au-dessus de 1081 px écrivait déjà `minmax(0,1fr)` correctement. C'est le repli mobile qui l'avait perdu — le défaut ne pouvait donc apparaître QUE sur téléphone, là où on relit le moins. ⭐ Le tableau, lui, n'est pas en cause : sa `figure` porte déjà `overflow-x:auto`. Une fois la piste capable de rétrécir, il défile dans SA boîte (213 px) au lieu d'emporter la page. */ .px-acols{grid-template-columns:minmax(0,1fr);gap:56px} /* ⭐ LES 34 px LATÉRAUX RENDUS À LA TÊTE ET AU CORPS DE L'ARTICLE. Leur notation raccourcie `padding:52px 0 0` effaçait ceux de `.px-wrap` — voir le détail au-dessus de `.px-ahero`. Réparé ici plutôt qu'à la source pour ne rien déplacer sur desktop, exactement comme `/contact/` le 2026-08-13. ⚠️ `padding-left`/`right` et non un raccourci : c'est précisément ce qui a créé le défaut. */ .px-ahero, .px-acols{padding-left:34px;padding-right:34px} /* ⛔⛔ LE SOMMAIRE PASSE DEVANT L'ARTICLE, L'ENCART RESTE DERRIÈRE. Empilée, la colonne tombait ENTIÈREMENT après le corps de l'article : « le sommaire se retrouve après le contenu, donc pas pertinent » (Thomas, 2026-08-21). Un sommaire qu'on découvre une fois l'article lu ne sert à rien — il sert à décider si on va le lire. ⭐ MAIS PAS LA COLONNE ENTIÈRE : remonter l'encart avec lui poserait un appel à l'action AVANT le premier paragraphe. On sépare les deux. ⚠️ `display:contents` sur la colonne fait remonter le sommaire et l'encart comme enfants directs de `.px-acols` — c'est la seule façon de les ordonner l'un sans l'autre, ils sont frères dans le HTML. ⚠️ `.px-acols` passe en flex : `order` ne s'applique qu'aux enfants d'une grille ou d'un flex, et la grille à une colonne ne sait pas les réordonner sans nommer des lignes. ⭐ RIEN DE TOUT CECI NE VAUT AU-DESSUS DE 1081 px : là, la colonne est collante à côté du texte et Thomas la veut telle quelle. */ /* ⛔⛔ `align-items:stretch` EST OBLIGATOIRE ICI. La règle de base pose `align-items:start`, ce qui a du sens sur une grille à DEUX colonnes : la colonne de droite ne s'étire pas sur la hauteur. Mais en flex COLONNE l'axe secondaire devient la LARGEUR : `start` cesse d'étirer les éléments sur la largeur du conteneur et les dimensionne à leur CONTENU. Le corps de l'article a repris la largeur intrinsèque de son tableau — 520 px dans une fenêtre de 375, mesuré, alors que `.px-acols` faisait bien 375. */ .px-acols{display:flex;flex-direction:column;align-items:stretch} /* ⛔⛔ `min-width:0` — CINQUIÈME INSTANCE DU MÊME PIÈGE, et je viens de la créer en passant cette grille en flex : un élément flex a `min-width:auto` et ne peut donc PAS rétrécir sous la largeur de son contenu. Le tableau de l'article a aussitôt réélargi la page — 554 px de large pour une fenêtre de 375, soit 179 px de débordement, exactement le défaut que le `minmax(0,1fr)` du mode grille corrigeait dix lignes plus haut. ⚠️ `.px-aside` est en `display:contents` : ses deux enfants sont donc les vrais éléments flex, mais restent des petits-enfants dans le DOM. Le sélecteur `>` ne les atteint pas, il faut les nommer. */ .px-corps, .px-somm, .px-encart{min-width:0} .px-aside{display:contents} .px-somm{order:-1} .px-encart{order:1} .px-suite ul{grid-template-columns:1fr 1fr} } @media(max-width:820px){ .px-ahero{padding-top:34px} /* Le fil garde ses 30 px sous téléphone : Thomas a validé cet empilement-là. Seul l'ordinateur est resserré à 14, voir le bloc `.px-fil`. */ .px-fil{margin-bottom:30px} .px-ahero .wp-block-post-title{max-width:none} .px-corps h2{margin-top:48px} .px-suite ul{grid-template-columns:1fr} } /* ══════════════════════════════════════════════════════════════════════════ PAGE D'ATTENTE Pleine hauteur, tout centré, sans navigation : rien à cliquer qui ne mène nulle part. Le fond vivant reste, c'est lui qui fait le travail. ══════════════════════════════════════════════════════════════════════════ */ .px-construction{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center} .px-construction>.wp-block-post-content{width:100%} .px-cons{max-width:760px;margin-inline:auto;padding:64px 34px;text-align:center} .px-cons>*{margin-block:0} .px-cons-marque{font-family:var(--f-titre);font-size:22px;font-weight:700;letter-spacing:-.03em; color:var(--px-ink)} .px-cons .px-tag{display:inline-flex;margin-top:36px} .px-cons-titre{font-family:var(--f-titre);font-size:clamp(28px,4.4vw,54px);font-weight:700; letter-spacing:-.05em;line-height:1.08;margin-top:26px;text-wrap:balance} .px-cons-sous{font-family:var(--f-accroche);font-size:17px;line-height:1.62;color:var(--px-ink-2); max-width:54ch;margin:24px auto 0} .px-cons-plug{margin-top:44px;padding-top:28px;border-top:1px solid var(--px-rule); display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap} .px-cons-plug .px-lbl{flex:none} .px-cons-plug ul{list-style:none;display:flex;gap:26px;flex-wrap:wrap;margin:0;padding:0} .px-cons-plug li{font-size:14.5px;font-weight:650;color:var(--px-ink-3)} .px-cons-actions{justify-content:center;margin-top:40px} .px-cons-actions .wp-block-button__link{font-family:var(--f-texte);font-size:14px;font-weight:700; padding:14px 26px;border-radius:var(--px-r-sm);background:var(--px-cy);color:#04262C;border:0;transition:.16s} .px-cons-actions .wp-block-button__link:hover{background:#5FD8EE;box-shadow:0 0 28px -8px rgba(25,200,230,.9)} .px-cons-pied{margin-top:34px;font-size:12.5px;color:var(--px-ink-4)} @media(max-width:620px){.px-cons-plug{gap:14px}.px-cons-plug ul{gap:16px;justify-content:center}} /* le troisième temps de l'accroche : c'est lui qui tease, il doit ressortir */ .px-cons-appui{color:var(--px-ink);font-weight:500} /* ══════════════════════════════════════════════════════════════════════════ LA PAGE CONTACT Deux colonnes, comme l'article : le texte à gauche, le formulaire à droite dans sa carte. Sur petit écran elles s'empilent dans l'ordre du code — on lit d'abord, on remplit ensuite. ══════════════════════════════════════════════════════════════════════════ */ /* Le titre vit DANS la colonne de gauche : les deux colonnes démarrent donc à la même hauteur, et le formulaire ne paraît plus tombé en bas de page. */ .px-ccols{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:66px; align-items:start;padding:52px 0 0} .px-cgauche .wp-block-post-title{font-family:var(--f-titre);font-size:clamp(27px,3.4vw,44px); font-weight:700;letter-spacing:-.05em;line-height:1.13;color:var(--px-ink); margin:0;max-width:15ch} /* le texte de la page — la copie, écrite dans l'éditeur */ .px-ctexte{font-size:16.5px;line-height:1.72;color:var(--px-ink-2);max-width:56ch; margin-top:30px} .px-ctexte>*{margin:0} .px-ctexte>*+*{margin-top:22px} .px-ctexte strong{color:var(--px-ink);font-weight:700} .px-ctexte h2{font-family:var(--f-accroche);font-size:clamp(20px,2vw,25px);font-weight:600; letter-spacing:-.02em;line-height:1.26;color:var(--px-ink);margin:48px 0 0} .px-ctexte h2+*{margin-top:18px} .px-ctexte ul,.px-ctexte ol{margin:22px 0 0;padding-left:22px} .px-ctexte li+li{margin-top:9px} .px-ctexte li::marker{color:var(--px-ink-4)} /* ── CE QUI SE PASSE ENSUITE : TROIS TEMPS SUR UN FIL ───────────────────── La colonne de gauche ne portait que deux paragraphes face à un formulaire de six champs : elle paraissait vide, et le déséquilibre se voyait. Les trois phrases du texte deviennent trois temps numérotés — les mots ne changent pas, c'est la mise en page qui fait le travail. ⭐ LA COULEUR ARRIVE PAR UN BORD ET S'ÉTEINT : le fil part en cyan sous le premier numéro et se dissout avant le troisième. Il descend, comme la lecture. Aucun fond, aucun cadre — la liste reste une liste. ⚠️ `.px-ctexte ol` pose déjà `padding-left:22px` et pèse plus lourd qu'une classe seule : sans le sélecteur descendant ici, le retrait revient et décale le fil de ses pastilles. */ .px-ctexte .px-cetapes{list-style:none;position:relative;margin:38px 0 0;padding:0} /* Le fil court entre les centres des pastilles, pas sur toute la hauteur : il relie les temps au lieu de border le bloc. */ .px-cetapes::before{content:'';position:absolute;left:17px;top:17px;bottom:17px;width:1px; background:linear-gradient(180deg,var(--px-cy),rgba(25,200,230,.28) 42%,transparent 92%)} .px-ctexte .px-cetapes li{position:relative;display:grid; grid-template-columns:35px minmax(0,1fr);gap:18px;align-items:start} .px-ctexte .px-cetapes li+li{margin-top:26px} /* La pastille masque le fil derrière elle : c'est ce qui fait lire une suite de haltes plutôt qu'un trait continu. Le fond de page est opaque ici. */ .px-cetapes .n{position:relative;z-index:1;width:35px;height:35px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:13px; background:#0B1016;border:1px solid var(--px-rule);color:var(--px-ink-3)} /* Le premier temps est celui qui vient de commencer — c'est le seul allumé. */ .px-cetapes li:first-child .n{border-color:rgba(25,200,230,.45);color:var(--px-cy)} .px-cetapes p{margin:0;font-size:15.5px;line-height:1.62;color:var(--px-ink-2); padding-top:7px} @media(max-width:900px){ .px-ctexte .px-cetapes{margin-top:30px} .px-ctexte .px-cetapes li+li{margin-top:22px} .px-cetapes p{font-size:15px} } /* ── LE FORMULAIRE ───────────────────────────────────────────────────────── */ .px-form{padding:28px 30px} .px-form .px-champ{margin:0 0 18px} .px-form label{display:flex;align-items:baseline;gap:9px;margin-bottom:8px; font-size:12.5px;font-weight:650;color:var(--px-ink-2)} .px-opt{font-size:11px;font-weight:600;color:var(--px-ink-4);letter-spacing:.02em} .px-form input,.px-form textarea,.px-form select{width:100%;display:block;font-family:var(--f-texte); font-size:15px;line-height:1.5;color:var(--px-ink);background:var(--px-ctl); border:1px solid var(--px-ctl-bd);border-radius:var(--px-r-sm);padding:12px 14px; transition:border-color .18s ease,background .18s ease} .px-form textarea{resize:vertical;min-height:132px} .px-form input::placeholder,.px-form textarea::placeholder{color:var(--px-ink-4)} .px-form input:focus,.px-form textarea:focus,.px-form select:focus{outline:none;border-color:var(--px-cy); background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(25,200,230,.16)} /* Le remplissage automatique du navigateur impose un fond blanc et un texte noir, illisibles sur ce thème. C'est le seul moyen de le lui reprendre : la couleur du texte passe par `-webkit-text-fill-color`, et le fond par une ombre intérieure assez grande pour couvrir tout le champ. */ .px-form input:-webkit-autofill, .px-form input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--px-ink); -webkit-box-shadow:0 0 0 1000px #131A22 inset; caret-color:var(--px-ink)} .px-form .px-btn{width:100%;text-align:center;margin-top:4px} /* — les refus — */ .px-err{display:block;margin-top:7px;font-size:12.5px;font-style:normal;color:#FF8A8E} .px-err-bloc{margin:0 0 20px;padding:12px 14px;border-radius:var(--px-r-sm); background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.28);line-height:1.5} .px-form .px-champ:has(.px-err) input, .px-form .px-champ:has(.px-err) textarea, .px-form .px-champ:has(.px-err) select{border-color:rgba(229,72,77,.5)} /* La mention de confidentialité : présente et lisible, jamais mise en avant. Ce n'est pas un argument de vente, c'est une information due. */ .px-mention{margin:16px 0 0;font-size:11.5px;line-height:1.55;color:var(--px-ink-4)} .px-mention a{color:var(--px-ink-3);border-bottom:1px solid var(--px-ctl-bd)} .px-mention a:hover{color:var(--px-cy);border-bottom-color:var(--px-cy)} /* — le piège à robots — Sorti de l'écran plutôt que masqué par `display:none` : certains robots ignorent les champs qu'ils savent invisibles, celui-ci reste « affiché ». `aria-hidden` et `tabindex="-1"` le retirent du clavier et des lecteurs d'écran, donc aucun humain ne peut le remplir par accident. */ .px-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* — la confirmation à l'écran — La vraie confirmation, celle qui marche même si aucun courriel ne part. */ .px-recu{padding:30px 32px} .px-recu p:not(.px-lbl){font-family:var(--f-accroche);font-size:16px;line-height:1.6; color:var(--px-ink-2);margin:14px 0 0} @media(max-width:1080px){ .px-ccols{grid-template-columns:1fr;gap:44px} .px-cgauche .wp-block-post-title{max-width:none} .px-ctexte{max-width:none} } @media(max-width:820px){ .px-ccols{padding-top:34px} .px-form{padding:24px 20px} } /* ══════════════════════════════════════════════════════════════════════════ LA LANDING Dix sections, un seul tunnel. Chacune répond à l'objection que la précédente soulève, donc le rythme vertical compte autant que la mise en page : on respire entre deux sections, jamais à l'intérieur d'une. Le mouvement ici a une fonction — révéler à mesure qu'on lit, montrer où l'on en est, marquer la section courante. Rien de décoratif : sur un archétype Sage, une animation gratuite coûte de la crédibilité. ══════════════════════════════════════════════════════════════════════════ */ .px-sec{padding:156px 0 0} .px-sec:first-child{padding-top:0} /* L'en-tête de section : sur-titre, titre, chapô. Le sur-titre porte le nom de l'étape du tunnel, le titre porte la promesse. */ .px-sec-tete{max-width:760px} .px-sec-tete .px-lbl{margin-bottom:18px} .px-sec-titre{font-family:var(--f-titre);font-size:clamp(25px,3vw,40px);font-weight:700; letter-spacing:-.05em;line-height:1.12;color:var(--px-ink);margin:0;text-wrap:balance} .px-sec-chapo{font-family:var(--f-accroche);font-size:17px;line-height:1.62; color:var(--px-ink-2);margin:22px 0 0;max-width:64ch} /* Le décalage des apparitions. `--i` est posé sur chaque enfant : les éléments d'une même rangée arrivent l'un après l'autre plutôt qu'en bloc, ce qui suit l'œil au lieu de le bousculer. */ .px-rv{transition-delay:calc(var(--i,0) * 45ms)} @media(prefers-reduced-motion:reduce){.px-rv{transition-delay:0s}} /* ── 3 · LE PROBLÈME — UNE SCÈNE QUI SE RACONTE ─────────────────────────── Cinq constats de poids égal sur un écran : l'œil ne sait pas où commencer, donc il ne commence pas. Ici on n'en montre qu'un à la fois, en grand, et le visuel de gauche se transforme au fil de la lecture. ⭐ Le visuel ne décore pas, il DÉMONTRE : quatre panneaux affichant quatre chiffres différents pour la même semaine disent le problème mieux que le paragraphe qui l'explique. C'est la signature de la marque appliquée à la mise en page — les chiffres avant les histoires. */ .px-scene-probs{margin-top:44px;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:78px;align-items:start} /* Le visuel tient en place pendant que le texte défile. Centré verticalement pour rester en face du constat qu'il illustre. */ .px-scene-visuel{position:sticky;top:calc(50vh - 150px);height:300px} .px-vis{position:absolute;inset:0;opacity:0;transform:translateY(14px);pointer-events:none; transition:opacity .45s ease,transform .45s cubic-bezier(.16,.72,.22,1)} .px-vis.px-ici{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.px-vis{transition:none}} .px-vis .px-card{height:100%;padding:22px 24px;display:flex;flex-direction:column; justify-content:center} /* ── LA TEINTE DE CHAQUE CONSTAT ────────────────────────────────────────── Chaque élément de la série porte sa teinte dans `--a`, et tout ce qui doit s'y accorder la lit. Une seule déclaration par élément, au lieu de cinq règles qui répètent la même chose. */ .px-constat:nth-child(1),.px-vis:nth-child(1){--a:var(--px-s1)} .px-constat:nth-child(2),.px-vis:nth-child(2){--a:var(--px-s2)} .px-constat:nth-child(3),.px-vis:nth-child(3){--a:var(--px-s3)} .px-constat:nth-child(4),.px-vis:nth-child(4){--a:var(--px-s4)} .px-constat:nth-child(5),.px-vis:nth-child(5){--a:var(--px-s5)} /* Le liseré de la carte reprend la teinte, à épaisseur et intensité CONSTANTES. Le dégradé qu'il portait avant tenait sur ce format-ci par chance ; il tombait dès qu'une carte changeait de rapport. Une seule construction pour tous les panneaux teintés du site, donc un seul endroit à corriger. */ .px-vis .px-card::before{background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--a) 58%,white) 50%,transparent);opacity:.55} .px-vis .px-card{box-shadow:var(--px-shadow), 0 0 60px -30px color-mix(in srgb,var(--a) 70%,transparent)} /* les petits panneaux qui se contredisent */ .px-quatre{display:grid;grid-template-columns:1fr 1fr;gap:10px} .px-quatre div{padding:12px 14px;border-radius:var(--px-r-sm);background:rgba(255,255,255,.035); border:1px solid var(--px-rule)} .px-quatre span{display:block;font-size:10px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--px-ink-4);margin-bottom:6px} .px-quatre b{font-family:var(--f-titre);font-size:17px;font-weight:600;letter-spacing:-.04em; color:var(--px-ink-2);font-variant-numeric:tabular-nums} .px-quatre div:nth-child(1) b{color:var(--px-ink)} /* le constat lui-même : l'accroche domine, l'explication s'efface */ .px-scene-textes{display:flex;flex-direction:column} .px-constat{min-height:62vh;display:flex;flex-direction:column;justify-content:center; padding:20px 0;opacity:.28;transition:opacity .45s ease} .px-constat.px-ici{opacity:1} @media(prefers-reduced-motion:reduce){.px-constat{opacity:1;transition:none}} .px-constat .n{font-family:var(--f-titre);font-size:13px;font-weight:700;letter-spacing:.06em; color:var(--a,var(--px-cy));margin-bottom:16px; text-shadow:0 0 22px color-mix(in srgb,var(--a,var(--px-cy)) 55%,transparent)} .px-constat h3{font-family:var(--f-accroche);font-size:clamp(21px,2.4vw,29px);font-weight:600; letter-spacing:-.025em;line-height:1.28;color:var(--px-ink);margin:0 0 16px;max-width:20ch} .px-constat p{font-size:15px;line-height:1.66;color:var(--px-ink-3);margin:0;max-width:52ch} /* ── 4 · COMPRENDRE AVANT DE DÉCIDER ────────────────────────────────────── */ /* La chute : la phrase qui referme un temps. Elle doit se détacher du corps sans crier — un filet cyan et un peu de blanc suffisent. */ .px-chute{margin-top:22px;padding-left:18px;border-left:2px solid var(--px-cy); font-family:var(--f-accroche);font-size:16px;line-height:1.5;color:var(--px-ink); letter-spacing:-.01em} /* ── LES ONGLETS DES QUATRE TEMPS ───────────────────────────────────────── Quatre piliers empilés faisaient une section de deux écrans qu'on parcourt en diagonale. En onglets, on n'en lit qu'un — et l'on voit d'un coup d'œil qu'il y en a quatre, ce que l'empilement ne montrait pas. Le panneau de droite donne à voir ce dont parle l'onglet : c'est là que la matière du produit fait le travail que le texte ne peut pas faire. */ .px-onglets{margin-top:44px} .px-onglets-barre{display:flex;gap:4px;padding:5px;border-radius:var(--px-r-sm); background:rgba(255,255,255,.03);border:1px solid var(--px-rule); width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none} .px-onglets-barre::-webkit-scrollbar{display:none} .px-onglets-barre button{flex:none;font-family:var(--f-accroche);font-size:14.5px; font-weight:500;letter-spacing:-.015em;color:var(--px-ink-3);background:none;border:0; padding:10px 20px;border-radius:8px;cursor:pointer;white-space:nowrap; transition:color .2s ease,background .25s ease} .px-onglets-barre button:hover{color:var(--px-ink-2)} /* Même dispersion que les constats, et même convergence : « Se souvenir » reprend le cyan de la marque, parce que c'est le temps qui referme la démonstration. */ .px-onglets-barre button:nth-child(1),.px-panneau:nth-child(2){--a:var(--px-s2)} .px-onglets-barre button:nth-child(2),.px-panneau:nth-child(3){--a:var(--px-s3)} .px-onglets-barre button:nth-child(3),.px-panneau:nth-child(4){--a:var(--px-s4)} .px-onglets-barre button:nth-child(4),.px-panneau:nth-child(5){--a:var(--px-s5)} /* L'onglet actif : teinte PLEINE et lueur franche. Décision de Thomas, prise contre la mesure et en connaissance de cause — j'avais assombri les fonds pour remonter le contraste du blanc, il a tranché pour l'éclat. ⚠️ Le blanc sur ces teintes brutes est à 1,7:1 sur le vert et 2,0:1 sur le cyan, là où la norme en demande 4,5. Le seul correctif qui ne touche pas à la couleur est l'ombre portée du texte : elle détache les lettres sans éteindre le fond. C'est un pansement, pas une solution — c'est assumé. */ .px-onglets-barre button[aria-selected="true"]{color:#fff; background:var(--a,var(--px-cy)); font-weight:700; text-shadow:0 1px 1px rgba(4,12,18,.2); box-shadow:0 0 32px -6px color-mix(in srgb,var(--a,var(--px-cy)) 88%,transparent), 0 4px 18px -6px color-mix(in srgb,var(--a,var(--px-cy)) 65%,transparent), 0 0 0 1px color-mix(in srgb,var(--a,var(--px-cy)) 70%,white) inset} /* L'aperçu produit s'accorde à l'onglet — c'est ce qui fait le lien entre le bouton du haut et le panneau du bas. ⚠️ CONTOUR PLEIN, comme les cartes de « l'effet produit ». Le dégradé qu'il portait avant était fait pour une carte de format moyen ; sur ce panneau, large et haut, il se consommait dans le coin haut-gauche et les trois autres bords restaient éteints. Une épaisseur et une intensité constantes ne dépendent pas du format. */ .px-panneau .px-apercu::before{background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--a) 58%,white) 50%,transparent);opacity:.55} .px-panneau .px-apercu{box-shadow:var(--px-shadow), 0 0 90px -34px color-mix(in srgb,var(--a) 88%,transparent)} /* Le micro-titre de l'aperçu reprend la teinte : le lien se voit jusque dans le détail du panneau. */ .px-panneau .px-apercu .app,.px-panneau .px-apercu .px-lbl{color:var(--a)} .px-panneau .px-chute{border-left-color:var(--a)} .px-panneau .barrejauge i{background:linear-gradient(90deg,var(--a), color-mix(in srgb,var(--a) 35%,transparent))} .px-panneau{display:grid;grid-template-columns:minmax(0,1fr) 1fr;gap:52px; align-items:center;margin-top:32px} .px-panneau[hidden]{display:none} /* L'entrée du panneau : court, et coupée si l'on a demandé moins de mouvement — un changement d'onglet doit répondre, pas se faire attendre. */ @media(prefers-reduced-motion:no-preference){ .px-panneau{animation:px-entre .22s cubic-bezier(.16,.72,.22,1) both} } @keyframes px-entre{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .px-panneau h3{font-family:var(--f-titre);font-size:clamp(21px,2.2vw,28px);font-weight:700; letter-spacing:-.045em;line-height:1.14;color:var(--px-ink);margin:0 0 18px} .px-panneau p{font-size:15.5px;line-height:1.7;color:var(--px-ink-2);margin:0;max-width:56ch} .px-panneau p+p{margin-top:14px} .px-panneau .tete{font-family:var(--f-accroche);font-size:17px;line-height:1.55; color:var(--px-ink);letter-spacing:-.015em} /* ── LES SEPT DÉCOUVERTES, EN CARROUSEL ─────────────────────────────────── Sept cartes en grille prenaient un écran entier pour des phrases d'une ligne. En carrousel elles tiennent sur une bande, et le débordement à droite dit qu'il y en a d'autres — ce qu'une grille pleine ne dit pas. Défilement natif avec accrochage : les flèches ne sont qu'un raccourci, la molette et le doigt marchent sans elles. */ /* ── CE QU'ON N'AURAIT PAS CHERCHÉ — SA PROPRE SECTION ──────────────────── ⭐ C'était traité en note de bas de page à la fin d'une autre section, alors que c'est l'endroit le plus « produit » de la page. Deux erreurs corrigées : elle sort en section autonome, et chaque découverte devient une CARTE DE CONSTAT — ce que Prism afficherait — au lieu d'une phrase qui la décrit. La phrase reste, en légende. Montrer plutôt que décrire, c'est la seule façon de tenir « les chiffres avant les histoires » dans une mise en page. */ /* ⚠️ Sans cette déclaration, une variable n'est PAS animable : le navigateur la traite comme une chaîne et le voile apparaîtrait d'un coup au lieu de fondre. `@property` lui donne un type, et la transition devient réelle. */ @property --tour{syntax:'';inherits:false;initial-value:0deg} @property --voile-g{syntax:'';inherits:false;initial-value:0px} @property --voile-d{syntax:'';inherits:false;initial-value:0px} /* ── LA PISTE ───────────────────────────────────────────────────────────── ⭐ Le masque en dégradé sur les bords : sans lui, la carte de droite est tranchée net au ras du cadre et le carrousel a l'air cassé plutôt qu'inachevé. Les classes sont posées par le script selon la position — pas de voile à gauche tant qu'on n'a pas défilé, sinon on estompe un bord où il n'y a rien à cacher. */ .px-trouv-piste{margin-top:26px;display:flex;gap:26px;overflow-x:auto; scroll-snap-type:x mandatory;scroll-behavior:smooth;list-style:none; /* ⚠️ L'OMBRE DU BAS ÉTAIT COUPÉE, et la cause n'est pas le rembourrage : dès que `overflow-x` n'est plus `visible`, `overflow-y: visible` est recalculé en `auto` par le navigateur. La piste découpe donc aussi verticalement, et l'ombre portée — qui descend d'une quarantaine de pixels — était tranchée net. Le rembourrage vertical doit la contenir. */ padding:14px 0 56px; scrollbar-width:none;-ms-overflow-style:none; --voile-g:0px; --voile-d:0px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--voile-g), #000 calc(100% - var(--voile-d)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--voile-g), #000 calc(100% - var(--voile-d)),transparent 100%); transition:--voile-g .3s ease,--voile-d .3s ease} .px-trouv-piste::-webkit-scrollbar{display:none} /* Le voile suit l'écart : avec 26 px entre les cartes, un voile trop court laisserait voir la coupe. */ .px-trouv-piste.px-voile-g{--voile-g:78px} .px-trouv-piste.px-voile-d{--voile-d:104px} /* ── DES LARGEURS INÉGALES ──────────────────────────────────────────────── Sept cartes de 348 px font un ruban très régulier — un métronome. Les visuels riches (deux courbes, onze ans de saisonnalité) prennent large, les chiffres secs restent étroits. Le défilement gagne un rythme. */ .px-trouv-piste li{flex:0 0 348px;scroll-snap-align:start;margin:0} .px-trouv-piste li:nth-child(1), .px-trouv-piste li:nth-child(8){flex-basis:412px} .px-trouv-piste li:nth-child(2), .px-trouv-piste li:nth-child(4){flex-basis:300px} /* ── LA DISPERSION SUR LES CARTES ───────────────────────────────────────── C'était la seule section de la page sans aucune couleur, alors qu'elle est censée être l'effet produit : elle avait l'air oubliée. Chaque carte porte sa teinte — contour, micro-titre, valeurs clés, jauges. */ .px-trouv-piste li:nth-child(1){--a:var(--px-s1)} .px-trouv-piste li:nth-child(2){--a:var(--px-s2)} .px-trouv-piste li:nth-child(3){--a:var(--px-s3)} .px-trouv-piste li:nth-child(4){--a:var(--px-s4)} .px-trouv-piste li:nth-child(5){--a:var(--px-s6)} .px-trouv-piste li:nth-child(6){--a:var(--px-s5)} .px-trouv-piste li:nth-child(7){--a:var(--px-s1)} .px-trouv-piste li:nth-child(8){--a:var(--px-s2)} .px-trouv{height:100%;padding:0;overflow:hidden;display:flex;flex-direction:column; /* ⚠️ PAS DE LUEUR COLORÉE AUTOUR. Une carte isolée sur fond sombre la porte très bien ; sur un rang de sept, les halos se rejoignent entre les cartes et forment des bandes troubles. Dehors, une ombre noire pour la profondeur — la couleur reste sur le contour et à l'intérieur. */ box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 50px -34px #000; transition:box-shadow .3s ease,border-color .3s ease} .px-trouv:hover{box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 28px 56px -32px #000, 0 0 44px -26px color-mix(in srgb,var(--a,var(--px-cy)) 70%,transparent)} /* ⚠️ CONTOUR PLEIN, PAS UN DÉGRADÉ. Le liseré dégradé de la carte commune est fait pour UNE carte posée seule sur un fond sombre : la lumière entre par un coin et meurt à l'opposé. Sur un rang de sept cartes de trois rapports différents, chacune reçoit son dégradé au même angle mais sur une diagonale différente — donc aucune ne s'éclaire au même endroit, et l'ensemble a l'air sale. Un contour d'épaisseur et d'intensité constantes se lit proprement quel que soit le format. La lueur passe à l'intérieur, où elle ne déborde sur rien, et ne sort qu'au survol. */ /* ⚠️ Même épaisseur et même intensité que les autres panneaux teintés de la page — il était à 46 % quand la story et le visuel du problème sont à 52, et l'écart se voyait d'une section à l'autre. L'épaisseur passe à 1,6 px : sur ces cartes, le halo interne éclaircit le fond juste derrière le liseré, qui perdait du contraste à épaisseur égale. */ .px-trouv:hover::after{background:color-mix(in srgb,var(--a,var(--px-cy)) 88%,transparent)} /* Le filet clair du haut, hérité de la carte commune, contredisait la teinte du contour juste en dessous. Il prend la couleur de la carte. */ .px-trouv::before{background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--a,var(--px-cy)) 55%,white) 50%,transparent);opacity:.5} /* La couleur vit désormais DEDANS : un halo interne qui suit le haut de la carte, là où se trouve le visuel. */ .px-trouv .vue{background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb,var(--a,var(--px-cy)) 13%,transparent) 0%,transparent 72%)} /* la partie haute montre, la partie basse dit ce qu'on regarde */ .px-trouv .vue{padding:22px 24px 20px;min-height:150px;display:flex;flex-direction:column; justify-content:center;border-bottom:1px solid var(--px-rule); /* C'est la partie HAUTE qui absorbe l'espace en trop, pas le bas de la carte : sinon la hauteur du visuel suit son contenu, et le filet de séparation tombe à un endroit différent sur chaque carte. */ flex:1} /* ⭐ La phrase passe en blanc : c'est LA TROUVAILLE, pas une légende. En gris sous un graphe, elle se lisait comme une note de bas de page. */ .px-trouv .dit{padding:17px 24px 21px;font-size:14.5px;line-height:1.5; color:var(--px-ink);font-family:var(--f-accroche);letter-spacing:-.01em; /* Deux ou trois lignes selon la phrase : sans hauteur commune, le filet de séparation tombait à un endroit différent sur chaque carte et la rangée paraissait bancale. */ min-height:104px;display:flex;align-items:center;margin:0} .px-trouv .px-num{font-size:30px} /* Le micro-titre dit dans quel domaine on est AVANT qu'on déchiffre le visuel. Il portait déjà l'information, en gris : il prend la teinte. */ .px-trouv .app{display:block;font-size:10px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--a,var(--px-ink-4));margin-bottom:12px} .px-trouv .rangee{display:flex;justify-content:space-between;align-items:baseline; font-size:12.5px;color:var(--px-ink-3);padding:6px 0} .px-trouv .rangee b{color:var(--px-ink-2);font-weight:650;font-variant-numeric:tabular-nums} .px-trouv .rangee.moi b,.px-trouv .rangee.moi span{color:var(--a,var(--px-cy))} .px-trouv .jauge{height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden} .px-trouv .jauge i{display:block;height:100%;border-radius:3px;background:var(--a,var(--px-cy))} .px-trouv .jauge.faible i{background:var(--px-ink-4)} /* La normale de saison porte la teinte de sa carte : tracée en gris, elle se confondait avec les barres qu'elle sert justement à situer. */ .px-trouv .normale{stroke:var(--a,var(--px-cy))} /* ── L'APERÇU PRODUIT DES ONGLETS ───────────────────────────────────────── Un panneau réduit, à la grammaire de l'écran du héros : barre de fenêtre, micro-titre, chiffres. ⚠️ C'est une RECONSTITUTION, comme le héros — les captures réelles de l'application n'ont jamais été fournies. */ .px-apercu{padding:0;overflow:hidden} .px-apercu .barre{display:flex;align-items:center;gap:9px;padding:12px 17px; border-bottom:1px solid var(--px-rule)} .px-apercu .pt{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.13); display:block;flex:none} .px-apercu .barre span{margin-left:5px;font-size:11.5px;color:var(--px-ink-3);font-weight:600} .px-apercu .dedans{padding:22px 24px 24px} .px-apercu .px-num{font-size:29px} .px-apercu .rangee{display:flex;justify-content:space-between;align-items:baseline; font-size:12.5px;color:var(--px-ink-3);padding:9px 0} .px-apercu .rangee+.rangee{border-top:1px solid var(--px-rule)} .px-apercu .rangee b{color:var(--px-ink-2);font-weight:650;font-variant-numeric:tabular-nums} .px-apercu .barrejauge{height:5px;border-radius:3px;background:rgba(255,255,255,.06); overflow:hidden;margin-top:7px} .px-apercu .barrejauge i{display:block;height:100%;border-radius:3px; background:linear-gradient(90deg,var(--px-cy),rgba(25,200,230,.35))} .px-fleches{display:flex;gap:8px;margin-top:4px} .px-fleches button{width:38px;height:38px;border-radius:50%;background:var(--px-ctl); border:1px solid var(--px-ctl-bd);color:var(--px-ink-2);cursor:pointer;display:flex; align-items:center;justify-content:center;transition:.18s} .px-fleches button:hover:not(:disabled){color:var(--px-ink);border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.07)} .px-fleches button:disabled{opacity:.32;cursor:default} .px-fleches svg{width:16px;height:16px} /* ── 5 · LA PREUVE — UNE STORY ──────────────────────────────────────────── Six actes, un seul à l'écran, qui défilent tout seuls — et un filament de progression au-dessus, comme sur les réseaux. ⭐ POURQUOI CE FORMAT MARCHE ICI ALORS QUE LES ONGLETS ÉCHOUAIENT : la story est linéaire par nature. Elle ne propose pas six portes, elle déroule une démonstration dans son ordre. C'est exactement le contenu qu'on a. ⚠️ Un contenu qui avance seul doit pouvoir être arrêté — c'est une règle d'accessibilité, pas une politesse. D'où la pause au survol, au clavier, et un bouton visible. Et la lecture ne démarre qu'une fois la section à l'écran : sinon la démonstration se jouerait pendant qu'on lit ailleurs. ══════════════════════════════════════════════════════════════════════════ */ /* ⭐ LA CARTE PREND LA COULEUR DE L'ACTE. Toute la page porte la dispersion ; cette carte restait en cyan du début à la fin. À chaque acte, le filament, le liseré, la lueur et l'accent du visuel changent de teinte : la démonstration devient un prisme qu'on traverse. C'est la métaphore de la marque, animée — une seule fois dans la page, donc elle ne s'use pas. ⭐ 05 porte l'AMBRE, seule teinte chaude de la série. C'est « ce que Prism ne dit pas » : la réserve, la nuance. L'ambre la signale sans l'alarmer — on n'est ni dans le rouge ni dans le gris — et la rupture de température au milieu d'une série froide dit à elle seule que cet acte n'est pas de même nature. Le cyan reprend la main sur 06 pour conclure. */ .px-story-acte:nth-child(1),.px-story-seg:nth-child(1){--a:var(--px-s1)} .px-story-acte:nth-child(2),.px-story-seg:nth-child(2){--a:var(--px-s2)} .px-story-acte:nth-child(3),.px-story-seg:nth-child(3){--a:var(--px-s3)} .px-story-acte:nth-child(4),.px-story-seg:nth-child(4){--a:var(--px-s4)} .px-story-acte:nth-child(5),.px-story-seg:nth-child(5){--a:var(--px-s6)} .px-story-acte:nth-child(6),.px-story-seg:nth-child(6){--a:var(--px-s5)} .px-story{margin:44px auto 0;max-width:1000px;padding:0; /* `visible` : la vignette d'illustration et le numéro fantôme sortent du cadre. C'est ce débordement qui donne de la profondeur — tout ranger dans un rectangle produit l'effet « diapositive ». */ overflow:visible; /* Surface plus claire et lueur, comme le panneau du héros : cette carte ne sert pas de support, elle REPRÉSENTE le produit. Sans ça elle s'éteint sur le fond sombre et la démonstration a l'air d'une note de bas de page. */ /* Le fond est déclaré une fois dans une variable, parce qu'il doit être REPOSÉ AU SURVOL — voir plus bas. */ --fond-story: radial-gradient(120% 130% at 88% -10%, color-mix(in srgb,var(--a,var(--px-cy)) 22%,transparent) 0%, transparent 58%), linear-gradient(168deg,rgba(52,72,92,.62),rgba(11,17,24,.96) 62%); background:var(--fond-story); /* ⭐ LA LUEUR EST À L'INTÉRIEUR, pas autour. Une carte qui rayonne vers le dehors éclaire la page ; une carte qui rayonne vers le dedans a l'air ALLUMÉE. C'est la différence entre un objet posé sur la page et un écran. Deux halos : un large qui remplit la surface, un serré qui souligne le bord intérieur. Dehors il ne reste qu'une ombre noire, pour la profondeur — plus aucune couleur ne bave sur le fond. */ box-shadow:0 1px 0 rgba(255,255,255,.09) inset, inset 0 0 150px -40px color-mix(in srgb,var(--a,var(--px-cy)) 12%,transparent), inset 0 0 44px -22px color-mix(in srgb,var(--a,var(--px-cy)) 15%,transparent), 0 34px 80px -44px #000; /* La lueur fond d'une teinte à l'autre ; le liseré, lui, est un dégradé et ne sait pas se transitionner — il change net, au même instant que l'acte. */ transition:box-shadow .65s ease,background .65s ease} /* ⚠️ LE SURVOL NE DOIT RIEN CHANGER ICI. `.px-card:hover` remplace le fond par la surface claire commune et soulève la carte : sur cette carte-là, ça donnait l'impression qu'elle était déjà survolée au repos, et que le survol l'éteignait. On repose donc le fond et on annule le soulèvement. Une carte qui représente un écran n'a pas à réagir au passage de la souris. */ .px-story:hover{background:var(--fond-story);transform:none} /* ⚠️ `:hover` compris. Sans lui, la règle de survol commune aux cartes (`.px-card:hover::after`) l'emporte en spécificité et le contour redevient blanc dès qu'on approche la souris — la teinte disparaissait pile au moment où l'on regarde. ⚠️ Et contour PLEIN, comme partout ailleurs. Cette carte est la plus large de la page — un rapport de 0,49 — donc celle où un dégradé linéaire meurt le plus vite : la couleur se consommait dans le coin haut-gauche et les trois quarts du périmètre restaient éteints. */ .px-story::before{background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--a,var(--px-cy)) 58%,white) 50%,transparent);opacity:.55} .px-story:hover{transform:none} /* — Le filament — */ .px-story-barres{display:flex;gap:5px;padding:14px 22px 0} .px-story-seg{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.11); overflow:hidden} .px-story-seg i{display:block;height:100%;width:0;border-radius:3px; background:var(--a,var(--px-cy)); box-shadow:0 0 9px color-mix(in srgb,var(--a,var(--px-cy)) 85%,transparent)} /* L'acte passé reste plein : on voit le chemin parcouru. */ .px-story-seg.px-passe i{width:100%} /* L'acte courant se remplit sur sa durée, portée par `--d`. */ .px-story-seg.px-actif i{animation:px-filament var(--d,9s) linear forwards} @keyframes px-filament{from{width:0}to{width:100%}} /* La pause gèle le filament là où il en est — c'est le retour visuel qui dit que la commande a été prise en compte. */ .px-story.px-pause .px-story-seg.px-actif i{animation-play-state:paused} @media(prefers-reduced-motion:reduce){ .px-story-seg.px-actif i{animation:none;width:100%} } /* ── LA BARRE DE FENÊTRE ────────────────────────────────────────────────── ⭐ C'est ce détail qui fait dire « c'est un produit » plutôt que « c'est un encadré de site ». Le panneau du héros l'a déjà, et c'est pour ça qu'il se lit comme un écran ; la story était un rectangle avec du texte dedans. Le titre de la fenêtre absorbe l'ancienne ligne d'en-tête : une rangée de moins, et l'information est là où on la cherche sur un écran — en haut à gauche. */ .px-story-fenetre{border-radius:var(--px-r) var(--px-r) 0 0; display:flex;align-items:center;gap:9px; padding:13px 22px;border-bottom:1px solid var(--px-rule); background:rgba(255,255,255,.03)} .px-story-fenetre .pt{width:8px;height:8px;border-radius:50%;flex:none; background:rgba(255,255,255,.13)} .px-story-fenetre .titre{margin-left:7px;font-size:12.5px;font-weight:650; color:var(--px-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* La période de comparaison, en second plan sur la même ligne : elle compte, mais pas autant que le mot « Analyse ». */ .px-story-fenetre .titre em{font-style:normal;color:var(--px-ink-4);font-weight:500} .px-story-fenetre .titre em::before{content:' · '} .px-story-fenetre .px-tag{margin-left:auto;flex:none;font-size:9.5px;padding:4px 10px} /* — La scène — Hauteur fixée sur l'acte le plus long : sans elle, la carte sauterait à chaque passage et la page se réorganiserait sous les yeux. */ .px-story-scene{position:relative;min-height:340px;padding:34px 38px;cursor:pointer; /* ⚠️ Surtout pas de découpe : un `overflow:hidden` posé ici pour contenir le numéro fantôme rognerait aussi la vignette censée déborder, et tout l'effet tomberait. */ overflow:visible} .px-story-acte{display:none} /* ⭐ DEUX COLONNES : le raisonnement à gauche, CE QU'IL DÉCRIT à droite. Quatre actes sur six n'avaient que du texte — d'où le vide, et d'où l'impression de platitude. Chaque acte montre maintenant l'objet dont il parle : les deux mois comparés, la provenance des chiffres, l'opération datée, le chiffre et ses trois attributs. */ .px-story-acte.px-actif{display:grid;grid-template-columns:minmax(0,1fr) 366px; gap:44px;align-items:center} /* Le grand numéro fantôme, tiré de `data-n` : un attribut, pas une duplication de contenu. Il déborde en bas à gauche pendant que la vignette sort à droite — le cadre est un repère, pas une boîte. */ .px-story-acte.px-actif::before{content:attr(data-n); position:absolute;left:-16px;bottom:-46px;z-index:0;pointer-events:none; font-family:var(--f-titre);font-size:200px;font-weight:700;letter-spacing:-.08em; line-height:1;color:var(--a,var(--px-cy));opacity:.08} .px-story-acte>*{position:relative;z-index:1} /* La réserve occupe toute la largeur : c'est le seul acte qui ne montre rien, et cette différence de forme dit qu'il dit autre chose. */ .px-story-acte.pleine.px-actif{display:block} @media(prefers-reduced-motion:no-preference){ .px-story-acte.px-actif{animation:px-entre .26s cubic-bezier(.16,.72,.22,1) both} } .px-story-acte .n{font-family:var(--f-titre);font-size:12px;font-weight:700; letter-spacing:.06em;color:var(--a,var(--px-cy));display:block;margin-bottom:10px; text-shadow:0 0 20px color-mix(in srgb,var(--a,var(--px-cy)) 55%,transparent)} .px-story-acte .lbl{font-family:var(--f-accroche);font-size:19px;font-weight:600; letter-spacing:-.02em;color:var(--px-ink);margin:0 0 18px} .px-story-acte .txt{font-family:var(--f-accroche);font-size:16.5px;line-height:1.62; color:var(--px-ink-2);margin:0;max-width:52ch} .px-story-acte .txt b{color:var(--px-ink);font-weight:600} /* — LE VISUEL DE L'ACTE — Même grammaire que les aperçus produit des onglets : un cadre discret, des étiquettes en petites capitales, des chiffres en chasse tabulaire. */ .px-svue{padding:20px 22px;border-radius:var(--px-r); /* Elle sort du cadre à droite. Son fond reste sobre : plus clair, elle avait l'air d'être en état de survol en permanence. */ margin-right:-84px; background:linear-gradient(168deg,rgba(46,62,80,.6),rgba(10,16,22,.94) 66%); border:1px solid color-mix(in srgb,var(--a,var(--px-cy)) 26%,transparent); box-shadow:0 30px 60px -36px #000, 0 0 46px -30px color-mix(in srgb,var(--a,var(--px-cy)) 80%,transparent); transition:border-color .5s ease,box-shadow .5s ease} .px-svue .app{display:block;font-size:10px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--px-ink-4);margin-bottom:14px} .px-svue .rangee{display:flex;justify-content:space-between;align-items:baseline; gap:14px;font-size:12.5px;color:var(--px-ink-3);padding:8px 0} .px-svue .rangee+.rangee{border-top:1px solid var(--px-rule)} .px-svue .rangee b{color:var(--px-ink-2);font-weight:650;font-variant-numeric:tabular-nums; text-align:right} .px-svue .rangee.fort b{color:var(--px-ink)} .px-svue .rangee.cy b{color:var(--a,var(--px-cy))} /* Deux colonnes de valeurs quand l'acte compare deux périodes. */ .px-svue .duo{display:grid;grid-template-columns:1fr auto auto;gap:6px 14px;align-items:baseline} .px-svue .duo .tete{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--px-ink-4);padding-bottom:8px;border-bottom:1px solid var(--px-rule); text-align:right} .px-svue .duo .tete:first-child{text-align:left} .px-svue .duo span{font-size:12.5px;color:var(--px-ink-3);padding:7px 0} .px-svue .duo b{font-size:12.5px;font-weight:650;color:var(--px-ink-2);text-align:right; font-variant-numeric:tabular-nums;padding:7px 0} .px-svue .duo b.ici{color:var(--a,var(--px-cy))} /* Le grand chiffre de clôture, avec ses attributs sous lui. */ .px-svue .gros{font-family:var(--f-titre);font-size:38px;font-weight:700;letter-spacing:-.05em; color:#fff;line-height:1;margin-bottom:16px;display:block} /* Les deux chiffres du constat, sortis du paragraphe : le chiffre d'abord, la phrase qui l'explique ensuite. */ .px-doc-chiffres{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 20px} .px-doc-chiffres div{padding:13px 18px;border-radius:var(--px-r-sm); background:rgba(255,255,255,.04);border:1px solid var(--px-rule);min-width:152px} .px-doc-chiffres span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--px-ink-4);margin-bottom:7px} .px-doc-chiffres b{font-family:var(--f-titre);font-size:23px;font-weight:700; letter-spacing:-.05em;line-height:1} .px-doc-chiffres .bas b{color:#FF8A8E} .px-doc-chiffres .haut b{color:var(--px-pos)} /* La réserve — « ce que Prism ne dit pas ». Mise à part parce qu'elle dit le contraire des cinq autres : c'est une limite assumée, et c'est elle qui rend le reste croyable. Ton neutre, jamais alarmant. */ .px-doc-reserve{margin:0;padding:18px 22px;border-radius:var(--px-r-sm); background:rgba(255,255,255,.03);border:1px dashed var(--px-ctl-bd)} .px-doc-reserve p{font-size:15.5px;line-height:1.62;color:var(--px-ink-3);margin:0} .px-doc-reserve p b{color:var(--px-ink-2);font-weight:600} /* — Les commandes — Visibles et atteignables au clavier. Le clic sur la scène avance aussi, mais on ne s'en remet pas à un geste qu'aucune étiquette n'annonce. */ .px-story-cmd{border-radius:0 0 var(--px-r) var(--px-r); display:flex;align-items:center;gap:10px; padding:0 26px 22px;border-top:1px solid var(--px-rule);padding-top:18px} .px-story-cmd .compte{font-family:var(--f-titre);font-size:12px;font-weight:600; color:var(--px-ink-4);font-variant-numeric:tabular-nums;margin-left:auto} .px-story-cmd button{width:36px;height:36px;border-radius:50%;background:var(--px-ctl); border:1px solid var(--px-ctl-bd);color:var(--px-ink-2);cursor:pointer;display:flex; align-items:center;justify-content:center;transition:.18s} .px-story-cmd button:hover:not(:disabled){color:var(--px-ink); border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)} .px-story-cmd button:disabled{opacity:.3;cursor:default} .px-story-cmd svg{width:15px;height:15px} .px-story-cmd .px-lecture .barre{display:none} .px-story.px-pause .px-story-cmd .px-lecture .barre{display:block} .px-story.px-pause .px-story-cmd .px-lecture .fleche{display:none} /* ── 6 · POURQUOI LE CROIRE — L'AFFIRMATION, PUIS LA PREUVE ─────────────── 270 mots de justification que personne ne lit. Or les trois titres SONT l'argument : chacun garde son titre et une seule phrase, le reste se déplie au clic. Rien n'est perdu — le texte est dans la page, indexé et lu par un lecteur d'écran. Celui qui veut la preuve clique ; celui qui ne clique pas ne l'aurait pas lue. */ .px-croire{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .px-croire .px-card{height:100%;padding:28px 28px 26px;display:flex;flex-direction:column} .px-croire h3{font-family:var(--f-accroche);font-size:19px;font-weight:600; letter-spacing:-.02em;line-height:1.3;color:var(--px-ink);margin:0 0 16px} .px-croire .cle{font-size:15.5px;line-height:1.62;color:var(--px-ink-2);margin:0} .px-croire details{margin-top:auto;padding-top:18px} .px-croire summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px; font-size:12.5px;font-weight:650;color:var(--px-cy);transition:gap .2s ease} .px-croire summary::-webkit-details-marker{display:none} .px-croire summary::after{content:'';width:7px;height:7px;border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-1px); transition:transform .25s ease} .px-croire details[open] summary::after{transform:rotate(-135deg) translateY(-1px)} .px-croire summary:hover{gap:11px} .px-croire details p{font-size:14.5px;line-height:1.66;color:var(--px-ink-3);margin:16px 0 0} /* Le schéma de provenance : il dit en une image ce que le premier bloc explique en quatre lignes. Le back-office au centre, les plateformes autour — en éclairage, jamais en source. */ .px-provenance{margin:20px 0 0;padding:18px;border-radius:var(--px-r-sm); background:rgba(255,255,255,.025);border:1px solid var(--px-rule)} .px-provenance .socle{padding:11px 14px;border-radius:8px;text-align:center; background:rgba(25,200,230,.12);border:1px solid rgba(25,200,230,.32)} .px-provenance .socle b{font-family:var(--f-accroche);font-size:13.5px;font-weight:600; color:#9FE4F2} .px-provenance .socle span{display:block;font-size:10.5px;color:rgba(159,228,242,.72);margin-top:3px} .px-provenance .autour{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px} .px-provenance .autour span{font-size:11px;font-weight:600;color:var(--px-ink-4); padding:5px 10px;border-radius:14px;border:1px solid var(--px-rule)} .px-prov-duo{display:flex;align-items:center;gap:10px} .px-provenance .note{display:block;text-align:center;font-size:10.5px;color:var(--px-ink-4); margin-top:10px;font-style:normal} .px-croire-pied{margin-top:26px;font-family:var(--f-accroche);font-size:16px;line-height:1.6; color:var(--px-ink-2);max-width:70ch} .px-croire-pied b{color:var(--px-ink);font-weight:600} /* ── 7 · POUR QUI ───────────────────────────────────────────────────────── Une liste de reconnaissance : le lecteur doit se voir dans au moins deux lignes. Deux colonnes pour qu'elle se balaie d'un regard. */ .px-pour{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:16px 44px; list-style:none;padding:0} .px-pour li{display:flex;gap:15px;align-items:flex-start;font-size:16px;line-height:1.62; color:var(--px-ink-2);margin:0} .px-pour svg{flex:none;width:19px;height:19px;margin-top:3px;color:var(--px-cy)} .px-pour b{color:var(--px-ink);font-weight:650} .px-pour-chute{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:22px} .px-pour-chute p{font-family:var(--f-accroche);font-size:18px;line-height:1.5; color:var(--px-ink);margin:0;letter-spacing:-.015em} /* ── 8 · TARIFS ─────────────────────────────────────────────────────────── Trois offres, une seule ouverte, au milieu. ⭐ Les deux autres restent ENTIÈREMENT LISIBLES : une carte vidée inquiète, une carte pleine donne de la profondeur au produit. Le verrouillage se dit par une mention factuelle, « ouverture progressive », et par l'absence de bouton — jamais en grisant le contenu, ce qui reviendrait à cacher ce qu'on veut montrer. Boost au centre parce que c'est la seule ouverte, et qu'une offre encadrée par deux autres se lit comme un palier plutôt que comme un pis-aller. ⚠️ Le bouton de chaque offre est une VARIABLE : démonstration aujourd'hui, lien de paiement le jour venu. C'est un réglage, pas une refonte. */ /* Trois offres : Freemium, Starter, Boost. Intelligence a été retirée. */ .px-grille-tarifs{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr); gap:16px;align-items:stretch;max-width:1020px;margin-inline:auto} /* ── LE SÉLECTEUR DE PÉRIODICITÉ ────────────────────────────────────────── Deux vrais boutons, pas des onglets : on ne change pas de contenu, on change une unité. `aria-pressed` dit lequel est actif. */ .px-bascule{display:inline-flex;gap:4px;padding:5px;border-radius:99px; background:rgba(255,255,255,.035);border:1px solid var(--px-rule); margin-inline:auto;margin-top:8px} .px-sec .px-bascule{display:flex;width:fit-content} /* ⚠️ L'état actif était un aplat de cyan avec du texte sombre dessus. Deux raisons de le remplacer : la grammaire du site veut que la couleur arrive par un BORD et s'éteigne, jamais en fond plein ; et du blanc sur le cyan #19C8E6 ne donne que 2,01 de contraste, très en dessous des 4,5 exigés. L'actif garde donc le blanc et se distingue par son liseré et sa lueur. */ .px-bascule button{display:inline-flex;align-items:center;gap:9px;padding:11px 20px; border:0;border-radius:99px;cursor:pointer;background:none; font-family:var(--f-accroche);font-size:14px;font-weight:600; color:rgba(244,246,248,.62); transition:background .22s ease,color .22s ease,box-shadow .22s ease} /* La pastille de promotion : fond blanc, écriture noire, dans les deux états — c'est le seul point de contraste franc du sélecteur. */ .px-bascule button span{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px; color:#0A0C10;background:#FFF} .px-bascule button[aria-pressed="true"]{color:var(--px-ink); background:linear-gradient(96deg, color-mix(in srgb,#8FE9F8 16%,transparent), color-mix(in srgb,#6E6BFF 14%,transparent)); box-shadow:inset 0 0 0 1px rgba(143,233,248,.45),0 0 26px -10px rgba(122,190,255,.7)} .px-bascule button:hover{color:var(--px-ink)} .px-bascule button:focus-visible{outline:2px solid var(--px-cy);outline-offset:3px} /* ── LES CHIFFRES QUI DÉROULENT ─────────────────────────────────────────── Chaque chiffre est une colonne de 0 à 9 qu'on fait glisser, comme le compteur d'une pompe. ⚠️ Les colonnes doivent avoir une hauteur fixe et `overflow:hidden`, sinon les dix chiffres s'affichent les uns sous les autres. La virgule et les espaces restent immobiles. */ /* ⚠️ `.px-tarif .prix span` existe déjà pour le « € HT / mois » et attrapait ces colonnes, qui sont aussi des `span` : elles héritaient de ses 12,5 px au lieu des 31 du prix, et la fenêtre ne montrait plus un chiffre entier. D'où le sélecteur porté au même poids. */ .px-chiffre,.px-tarif .prix b .px-chiffre{display:inline-block;overflow:hidden; vertical-align:top;height:1em;line-height:1; font-size:inherit;font-weight:inherit;color:inherit} .px-chiffre i{display:block;font-style:normal;line-height:1; transition:transform .9s cubic-bezier(.22,.68,.24,1)} /* ⚠️ Les
de la piste doivent produire des lignes de hauteur EXACTE : sans `line-height:1`, chaque déplacement de 10 % tomberait à côté et les chiffres se décaleraient un peu plus à chaque tour. */ .px-chiffre i br{line-height:1} @media(prefers-reduced-motion:reduce){.px-chiffre i{transition:none}} .px-tarif{display:flex;flex-direction:column;padding:28px 26px 30px;height:100%} /* La seule ouverte se détache d'un cran, sans écraser ses voisines. */ .px-tarif.px-ouverte{transform:translateY(-8px)} .px-tarif.px-ouverte:hover{transform:translateY(-11px)} .px-tarif .nom{font-family:var(--f-accroche);font-size:16px;font-weight:600; letter-spacing:-.01em;color:var(--px-ink);margin:0} .px-tarif .etat{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0; font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--px-ink-4)} .px-tarif .etat::before{content:'';width:5px;height:5px;border-radius:50%; background:currentColor;flex:none} .px-tarif.px-ouverte .etat{color:var(--px-cy)} .px-tarif.px-ouverte .etat::before{box-shadow:0 0 9px 1px rgba(25,200,230,.8)} /* ── LA CARTE EN VEDETTE ────────────────────────────────────────────────── Un bandeau en diagonale dans le coin, et des lucioles qui montent. ⚠️ C'est le COIN qui découpe le bandeau, pas la carte : un `overflow:hidden` sur la carte aurait coupé les lucioles au ras du bord, alors qu'elles doivent s'en dégager. Le carré de 126 px est le seul élément qui rogne. La géométrie n'est pas approximative. Le bandeau est centré en (81, 45) dans ce carré, soit exactement sur la diagonale du coin : il coupe le bord haut et le bord droit à 90 px du coin l'un comme l'autre, et sa partie visible mesure 127 px pour un texte qui en demande 85. */ .px-ruban{position:absolute;top:0;right:0;width:126px;height:126px; margin:0;overflow:hidden;z-index:3;pointer-events:none; border-radius:0 var(--px-r) 0 0} .px-ruban span{position:absolute;top:32px;right:-55px;width:200px; padding:6px 0;text-align:center;transform:rotate(45deg); background:var(--px-cy);color:#06222A; font-family:var(--f-accroche);font-size:10.5px;font-weight:700;line-height:14px; letter-spacing:.12em;text-transform:uppercase; box-shadow:0 8px 20px -8px rgba(25,200,230,.75)} /* Les lucioles. ⭐ Elles ne traversent PAS la carte : elles se dégagent de son POURTOUR, surtout par le haut. Quatorze points sont posés sur le bord haut, huit le long des flancs, six sous le bord bas, et chacun s'écarte vers l'extérieur — d'autant plus fort qu'il part près d'un bord. La demande de Thomas est exactement celle-là : « surtout au-dessus et autour, à la limite un peu derrière, pas forcément à l'intérieur ». La version d'avant les faisait partir SOUS la carte avec 500 à 900 px de course : elles la traversaient de part en part, et c'est ce qui se voyait. Les courses tombent donc à 100–240 px, la longueur d'un halo. ⚠️ Le conteneur est calé EXACTEMENT sur la carte : c'est ce qui permet de lire `--x` comme un pourcentage de sa largeur et `--y` comme une distance depuis son bord haut. Rien ne les rogne — aucun ancêtre n'a d'`overflow` non visible, et c'est le coin du bandeau qui découpe, jamais la carte. Elles restent DERRIÈRE le contenu (`z-index:0` contre 2) : celles qui passent devant la carte se lisent comme une lueur, jamais comme un grain sur le texte. ⚠️ La course est donnée en PIXELS par `--v`, pas en pourcentage : un pourcentage de translation se rapporte à la taille de l'élément, et 100 % d'un point de 3 px l'aurait fait monter de 3 px. ⚠️ Aucun `filter` animé ici, seulement `transform` et `opacity` : un filtre animé refabrique tout ce qu'il recouvre à chaque image. ⚠️ Les propriétés personnalisées sont LUES par les images-clés, jamais animées : une propriété personnalisée ne s'interpole pas sans `@property`, elle sauterait d'une valeur à l'autre. */ .px-etincelles{position:absolute;inset:0;z-index:0;pointer-events:none} .px-etincelles b{position:absolute;left:var(--x);top:var(--y); width:var(--s);height:var(--s);border-radius:50%; background:#CFF6FF;opacity:0;box-shadow:0 0 9px 1px rgba(25,200,230,.7); animation:px-luciole var(--d) var(--t) infinite ease-in-out} /* Celles du bord bas s'accrochent au bas de la carte — `--y` s'y compte donc depuis le dessous — et leur course `--v` est NÉGATIVE : les mêmes images-clés les font descendre au lieu de monter, sans une règle de plus. */ .px-etincelles b.bas{top:auto;bottom:var(--y)} @keyframes px-luciole{ 0% {opacity:0; transform:translate3d(0,0,0) scale(.5)} 12% {opacity:.9} 55% {opacity:.6; transform:translate3d(calc(var(--dx) * .38),calc(var(--v) * -.55),0) scale(1)} 84% {opacity:.28} 100%{opacity:0; transform:translate3d(var(--dx),calc(var(--v) * -1),0) scale(.45)}} /* Une décoration ne s'impose pas à qui a demandé moins d'animation. */ @media(prefers-reduced-motion:reduce){.px-etincelles{display:none}} /* ⭐ LE PRIX PLEIN, BARRÉ, AU-DESSUS DU PRIX RÉEL — ajouté le 2026-08-17. C'est lui qui fait exister la remise du mois offert : sans point de comparaison, 45,74 € ne dit rien. ⚠️ Son `span` porte `data-mensuel`/`data-annuel`, et le script de la bascule cible TOUT `span[data-mensuel]` : il bascule donc tout seul, sans une ligne de JavaScript en plus. Ne pas retirer ces attributs. ⚠️ `margin-bottom:-16px` : le prix réel garde ses 18 px de marge haute, qui feraient un trou sous une ligne de 12 px. On les résorbe ici plutôt que de toucher à `.px-tarif .prix`, partagé par les trois cartes — dont le Freemium, qui n'a pas de prix barré. */ .px-tarif .plein{margin:16px 0 -16px;font-size:12.5px;line-height:1; color:var(--px-ink-4)} .px-tarif .plein s{text-decoration-thickness:1px} .px-tarif .prix{display:flex;align-items:baseline;gap:7px;margin:18px 0 0;flex-wrap:wrap} .px-tarif .prix b{font-family:var(--f-titre);font-size:31px;font-weight:700; letter-spacing:-.055em;color:var(--px-ink);line-height:1} .px-tarif .prix span{font-size:12.5px;font-weight:600;color:var(--px-ink-3)} .px-tarif .lancement{text-align:center;margin:14px 0 0;padding:10px 13px;border-radius:var(--px-r-sm); background:rgba(25,200,230,.09);border:1px solid rgba(25,200,230,.22); font-size:12.5px;line-height:1.5;color:#9FE4F2} .px-tarif ul{list-style:none;margin:22px 0 0;padding:22px 0 0; border-top:1px solid var(--px-rule);display:flex;flex-direction:column;gap:11px} .px-tarif li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.5; color:var(--px-ink-2)} .px-tarif li svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--px-cy)} /* Une offre dont le contenu n'est pas arrêté ne fait pas semblant d'en avoir un : la carte s'éteint, et un cadenas dans un cadre discontinu dit qu'il y a quelque chose à cet emplacement, pas qu'on l'a oublié. Le survol la ranime à peine — verrouillée, mais pas morte. */ .px-tarif.px-verrou{opacity:.66;filter:saturate(.4); transition:background .3s ease,box-shadow .3s ease,transform .3s ease, opacity .3s ease,filter .3s ease} .px-tarif.px-verrou:hover{opacity:.88;filter:saturate(.75)} .px-tarif.px-verrou .prix b{color:var(--px-ink-2)} /* Le cadre occupe toute la place que prendrait la liste de l'offre ouverte : c'est un emplacement réservé, pas un trou. D'où le `flex:1`, qui aligne son bas sur celui de la liste voisine. */ .px-tarif .attente{margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--px-rule); flex:1;display:flex} .px-tarif .attente>div{flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:10px;padding:26px 14px;border-radius:var(--px-r-sm); background:rgba(255,255,255,.014);border:1px dashed rgba(255,255,255,.13)} .px-tarif .attente svg{width:22px;height:22px;color:var(--px-ink-3)} /* ⚠️ L'opacité .66 de la carte s'applique aussi au texte : en --px-ink-3 il tombait à 2,79 de contraste. --px-ink remonte au-dessus de 4,5 une fois l'opacité composée. */ .px-tarif .attente p{margin:0;font-family:var(--f-accroche);font-size:13px;font-weight:600; letter-spacing:.01em;color:var(--px-ink)} /* Le pied est collé en bas quelle que soit la hauteur de la liste, pour que les quatre boutons s'alignent. */ /* ⭐ « 7 jours d'essai gratuit » en cyan — c'est la seule ligne colorée de la liste, donc la première que l'œil accroche. Une CLASSE et non un `li:first-child` : la place de cette ligne dans la liste peut changer, sa nature non. */ .px-tarif li.essai b{color:var(--px-cy);font-weight:650} .px-tarif .pied{margin-top:auto;padding-top:24px} /* ⭐ « Demander plus d'informations » — un lien en TEXTE sous le bouton, dans les trois cartes. Volontairement discret : il ne doit pas concurrencer l'appel principal, seulement offrir une sortie à qui n'est pas prêt. Il vise `/contact/`, qui existe et fonctionne — pas de paramètre d'offre, `contact.php` ne le lirait pas et ce serait un paramètre inerte. */ .px-tarif .px-lien-info{display:block;margin-top:12px;text-align:center; font-size:12.5px;line-height:1.4;color:var(--px-ink-4); text-decoration:none;transition:color .18s ease} .px-tarif .px-lien-info:hover, .px-tarif .px-lien-info:focus-visible{color:var(--px-cy)} .px-tarif .px-btn{width:100%;text-align:center} .px-tarif .bientot{display:block;text-align:center;font-size:12.5px;font-weight:600; color:var(--px-ink-4);padding:13px 0} .px-tarif-note{margin:30px auto 0;max-width:640px;text-align:center;font-size:14.5px; line-height:1.65;color:var(--px-ink-3)} .px-tarif-note b{color:var(--px-ink-2);font-weight:600} /* ── 9 · L'APPEL FINAL ──────────────────────────────────────────────────── La seule section pleinement centrée de la page. Après neuf sections alignées à gauche, le centrage marque l'arrêt. ⭐ Son liseré porte LA DISPERSION ENTIÈRE — les cinq teintes d'un coup. C'est le seul endroit de la page où elles se retrouvent ensemble, et c'est la métaphore de la marque refermée : le prisme décompose, la dernière image recompose. */ .px-final{margin-top:156px;text-align:center;padding:60px 46px 56px} /* ⭐ LA DISPERSION TOURNE AUTOUR DU BLOC. Un dégradé conique dont l'angle de départ est animé : les six teintes défilent lentement le long du liseré. C'est le seul mouvement coloré de la page, et il est à sa place — la dernière image de la marque, celle qui recompose la lumière. ⚠️ L'angle doit être DÉCLARÉ pour être animable, comme les voiles du carrousel : sans `@property`, le navigateur le traite comme une chaîne et rien ne bouge. */ .px-final::after{ background:conic-gradient(from var(--tour), var(--px-s1),var(--px-s2),var(--px-s3),var(--px-s4), var(--px-s6),var(--px-s5),var(--px-s1))!important; opacity:.8} @media(prefers-reduced-motion:no-preference){ .px-final::after{animation:px-tourne 18s linear infinite} } @keyframes px-tourne{to{--tour:360deg}} .px-final .px-sec-titre{margin-inline:auto;font-size:clamp(27px,3.4vw,44px)} .px-final .amorce{font-family:var(--f-accroche);font-size:18px;line-height:1.6; color:var(--px-ink-2);max-width:56ch;margin:20px auto 0} /* Le paragraphe disait quatre choses à la file. Elles se lisaient comme une seule phrase longue ; en quatre entrées, on les compte. */ .px-final ul{list-style:none;margin:34px auto 0;padding:0;max-width:760px; display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left} .px-final li{display:flex;gap:13px;align-items:flex-start;padding:15px 18px; border-radius:var(--px-r-sm);background:rgba(255,255,255,.035); border:1px solid var(--px-rule);font-size:14.5px;line-height:1.5;color:var(--px-ink-2)} .px-final li svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--px-cy)} /* ⚠️ La marge basse était nulle : là où le bouton suit directement la phrase, sans le `div.deux` qui en porte deux, il se retrouvait collé au texte. Les 26 px repris de `.deux` valent pour les trois pages — quand un bloc suit avec sa propre marge, les deux se fondent et rien ne bouge chez lui. */ .px-final .gain{margin:30px auto 26px;font-family:var(--f-accroche);font-size:19px; line-height:1.5;color:var(--px-ink);letter-spacing:-.015em;max-width:44ch} .px-final .px-btn{padding:15px 30px;font-size:15px} /* Deux portes d'entrée plutôt qu'une : les offres pour qui veut se décider seul, la démonstration pour qui veut être accompagné. */ .deux{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;margin-top:26px} .px-pour-chute .deux{margin-top:0} /* Les deux réassurances, en pastilles : elles lèvent la dernière objection juste sous le bouton, là où elle se pose. */ /* Les mentions de l'appel final reprennent la mise en forme du héros : une pastille cerclée faisait un troisième niveau de boutons sous les deux vrais. Ici, un point et un mot — on lit, on ne clique pas. */ .px-final .rassure{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:16px; margin:22px 0 0;padding:0} .px-final .rassure li{display:inline-flex;align-items:center;gap:7px;font-size:12px; font-weight:600;color:var(--px-ink-3);white-space:nowrap} .px-final .rassure li::before{content:'';width:4px;height:4px;border-radius:50%;flex:none; background:var(--px-cy);box-shadow:0 0 8px 1px rgba(25,200,230,.7)} /* ── 10 · QUESTIONS FRÉQUENTES ──────────────────────────────────────────── Le dépliant du cœur de WordPress, habillé comme dans l'article — on ne redessine pas un composant qui existe. */ .px-faq{margin-top:50px;max-width:820px} .px-faq details{border-bottom:1px solid var(--px-rule);padding:20px 0} .px-faq details:first-of-type{border-top:1px solid var(--px-rule)} .px-faq summary{cursor:pointer;list-style:none;font-family:var(--f-accroche);font-size:17px; font-weight:600;letter-spacing:-.015em;color:var(--px-ink);padding-right:34px;position:relative} .px-faq summary::-webkit-details-marker{display:none} .px-faq summary::after{content:'';position:absolute;right:4px;top:8px;width:11px;height:11px; border-right:1.5px solid var(--px-ink-3);border-bottom:1.5px solid var(--px-ink-3); transform:rotate(45deg);transition:transform .25s ease,border-color .25s ease} .px-faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--px-cy)} .px-faq details[open] summary{color:var(--px-ink)} .px-faq p{font-size:15.5px;line-height:1.72;color:var(--px-ink-2);margin:16px 0 0;max-width:74ch} /* ── QUELQUES RÔLES DE TEXTE ────────────────────────────────────────────── Déclarés ici plutôt qu'en style écrit à la main dans le contenu : une section devient une composition, et un style en dur y serait figé pour toujours, invisible et non modifiable dans l'éditeur. */ /* ── LE HÉROS : LA PHRASE DE CIBLAGE ────────────────────────────────────── Elle était en gris, une taille en dessous de la promesse : elle disparaissait. Or c'est elle qui dit au visiteur « c'est de vous qu'on parle » — sur une page de vente, la reconnaissance passe avant l'argument. Elle devient donc un bloc à part, tenu par un filet cyan, à la hauteur de la promesse et non en dessous. */ /* ⚠️ `p.sous.sous-2` et non `.sous-2` : le raccord WordPress déclare `.px-hero p.sous`, plus spécifique, qui imposait sa taille et son gris. La règle passait sans effet visible sur la couleur ni le corps. */ .px-hero p.sous.sous-2{margin:26px 0 0;padding:16px 24px 16px 22px; border-left:3px solid var(--px-cy); border-radius:0 var(--px-r-sm) var(--px-r-sm) 0; font-family:var(--f-accroche);font-size:16.5px;line-height:1.5;color:#fff; font-weight:500;letter-spacing:-.015em;max-width:46ch; /* Le fond à 7 % ne se voyait pas : sur un fond déjà sombre, un voile aussi faible passe pour un défaut de rendu plutôt que pour une intention. Il monte à 20 % au ras du filet et court plus loin avant de s'éteindre. */ background:linear-gradient(90deg,rgba(25,200,230,.2),rgba(25,200,230,.05) 58%,transparent 94%); /* Une lueur qui sort par la gauche : c'est elle qui fait que le bloc a l'air éclairé par son filet, et non simplement colorié derrière. */ box-shadow:-16px 0 38px -24px rgba(25,200,230,.9), inset 1px 0 0 rgba(25,200,230,.35)} /* La promesse remonte d'un cran : c'est le deuxième palier de lecture, il ne doit pas se confondre avec le corps de texte. */ .px-hero p.sous:not(.sous-2){font-size:17.5px;color:var(--px-ink-2)} /* ── LE HÉROS CENTRÉ ────────────────────────────────────────────────────── La page s'ouvre sur une adresse au lecteur. Le panneau produit a été retiré : c'était une reconstitution, pas une capture. ⚠️ Les sélecteurs doivent porter `.px-hero.px-hero-centre` : les règles de base du héros sont en `.px-hero .wp-block-heading` et `p.sous:not(.sous-2)`, plus spécifiques, et imposaient leur taille — le titre restait à 42 px au lieu de 58. */ .px-hero.px-hero-centre{display:block;text-align:center;max-width:1120px;margin-inline:auto; padding:26px 0 0} .px-hero.px-hero-centre .px-tag{margin:0 auto} /* Le titre tient sur une ligne : c'est ce qui commande sa taille, pas l'inverse. Unbounded est très large, 58 px est le plafond utile ici. */ .px-hero.px-hero-centre h1{font-size:clamp(28px,4.05vw,58px);margin:24px 0 0; white-space:nowrap} .px-hero.px-hero-centre p.sous:not(.sous-2){margin:34px auto 0;max-width:none;font-size:17.5px; white-space:nowrap} /* La tête de la page « Nos offres » : la même composition que le héros de l'accueil, sans la barre — on n'y pose pas de question, on compare. */ .px-hero.px-offres-tete{max-width:1080px;padding-bottom:0} /* ⚠️ Le titre casse là où le sens le demande — après « commerce, » — et sa taille est celle qui permet à chaque membre de tenir sur SA ligne. Mesuré : le premier membre demande 955 px à 46 px de corps, pour 1 080 disponibles. À 52 il en demandait 1 093 et repassait à la ligne tout seul. */ .px-hero.px-hero-centre.px-offres-tete h1{white-space:normal;text-wrap:balance; font-size:clamp(28px,3.6vw,46px);line-height:1.16} /* La promesse porte l'argument, mais à 19 px elle rivalisait avec le titre. Elle redescend à 16,5 — et la mention d'onboarding avec elle, sinon les deux se retrouvaient au même corps et la hiérarchie s'effaçait. */ .px-hero.px-hero-centre.px-offres-tete p.sous:not(.sous-2){white-space:normal;max-width:74ch; font-size:16.5px;line-height:1.68;margin-top:30px} /* La chute passe au blanc du texte principal, pendant que les deux constats qui la précèdent restent en gris : c'est elle qu'on doit lire en premier. Hors requête média — le texte a été voulu sur les deux tailles. */ .px-hero.px-hero-centre.px-offres-tete p.sous b{color:var(--px-ink);font-weight:700} /* La mention d'onboarding se détache : une ligne sautée et un filet la sortent du paragraphe précédent. ⚠️ Le sélecteur porte les DEUX classes : `.px-hero-centre .tiers` pèse autant et vient après dans la feuille, sa marge nulle l'emportait. */ .px-hero.px-hero-centre.px-offres-tete .tiers{white-space:normal;max-width:60ch; margin:34px auto 0;padding-top:24px;border-top:1px solid var(--px-rule); font-size:15px;color:var(--px-ink-2)} #offres{padding-top:64px} /* ══ LA PAGE « AFFILIATION » ═══════════════════════════════════════════════ Elle réutilise tout ce qui existe — la grille « pour vous si… », la FAQ en `details`, l'appel final, les teintes de dispersion. Ne sont neufs ici que le simulateur, les trois raisons et les trois étapes. */ /* ⭐ CETTE TÊTE DOIT TENIR DANS L'ÉCRAN. C'est la demande de Thomas, et elle commande toutes les valeurs qui suivent : « on ne voit pas tout, donc ça claque un peu moins ». ⚠️ Mesuré à 1440 × 780 avant retouche : le simulateur finissait 145 px SOUS la ligne de flottaison. Chaque valeur ci-dessous est un rabotage chiffré, pas un choix d'esthétique — et c'est pourquoi elles sont serrées. */ .px-hero.px-affil-tete{max-width:1080px;padding-top:0;padding-bottom:0} .px-hero.px-hero-centre.px-affil-tete h1{white-space:normal;text-wrap:balance; font-size:clamp(28px,3.7vw,48px);line-height:1.13;margin-top:18px} .px-hero.px-hero-centre.px-affil-tete p.sous:not(.sous-2){white-space:normal;max-width:62ch; font-size:16.5px;line-height:1.68;margin-top:20px} /* ── LE SIMULATEUR ──────────────────────────────────────────────────────── ⭐ Il calcule pour de vrai, et il dit sur quoi. Le prix et le taux sont des attributs du balisage : le script ne connaît aucun chiffre, et changer le prix de Boost se fait à un seul endroit. */ .px-simu{max-width:760px;margin:28px auto 0;padding:22px 30px 24px} /* Les cartes du site se soulèvent au survol. Celle-ci ne doit pas : on y traîne un curseur, et un panneau qui bouge sous le doigt se manipule mal. */ .px-card.px-simu:hover{transform:none} .px-simu .tete{display:flex;align-items:center;justify-content:space-between; gap:18px;margin-top:14px} .px-simu label{font-family:var(--f-accroche);font-size:15px;font-weight:500; letter-spacing:-.01em;color:var(--px-ink-2)} .px-simu .compte{font-family:var(--f-titre);font-size:26px;font-weight:700; letter-spacing:-.055em;line-height:1;color:var(--px-ink);font-variant-numeric:tabular-nums} /* Le curseur. `--p` porte la position en pourcentage — elle est LUE par le dégradé de la piste, jamais animée : une propriété personnalisée ne s'interpole pas. Chrome et Firefox ne remplissent pas la piste de la même façon, d'où les deux constructions. */ .px-simu input[type=range]{-webkit-appearance:none;appearance:none;display:block; width:100%;height:22px;margin:14px 0 0;background:none;cursor:pointer} .px-simu input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px; background:linear-gradient(90deg,var(--px-cy) 0 var(--p,10%), rgba(255,255,255,.09) var(--p,10%) 100%)} .px-simu input[type=range]::-moz-range-track{height:6px;border-radius:99px; background:rgba(255,255,255,.09)} .px-simu input[type=range]::-moz-range-progress{height:6px;border-radius:99px; background:var(--px-cy)} .px-simu input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; width:20px;height:20px;margin-top:-7px;border:0;border-radius:50%;background:#FFF; box-shadow:0 0 0 4px rgba(25,200,230,.16),0 0 18px -2px rgba(25,200,230,.85)} .px-simu input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%; background:#FFF;box-shadow:0 0 0 4px rgba(25,200,230,.16),0 0 18px -2px rgba(25,200,230,.85)} /* Le clavier doit voir où il est : l'anneau s'épaissit au lieu d'un contour rectangulaire posé sur un curseur rond. */ .px-simu input[type=range]:focus-visible{outline:none} .px-simu input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(25,200,230,.5),0 0 0 8px rgba(25,200,230,.2)} .px-simu input[type=range]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 4px rgba(25,200,230,.5),0 0 0 8px rgba(25,200,230,.2)} .px-simu .bornes{display:flex;justify-content:space-between;margin-top:1px; font-size:11.5px;font-weight:600;color:var(--px-ink-4)} .px-simu .resultats{display:grid;grid-template-columns:1fr 1fr;gap:16px; margin-top:18px;padding-top:18px;border-top:1px solid var(--px-rule)} .px-simu .resultats p{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .px-simu .resultats span{width:100%;margin-bottom:6px;font-size:11.5px;font-weight:600; letter-spacing:.02em;color:var(--px-ink-3)} .px-simu .resultats output{font-family:var(--f-titre);font-weight:700;letter-spacing:-.055em; line-height:1.05;font-variant-numeric:tabular-nums;color:var(--px-ink);font-size:27px} /* Le second chiffre est un ordre de grandeur, pas le résultat : il se lit plus petit et plus gris. La hiérarchie passe par la taille, pas par une couleur de plus — le cyan reste l'accent d'interface. */ .px-simu .resultats p+p output{font-size:20px;color:var(--px-ink-2)} .px-simu .resultats i{font-style:normal;font-size:12px;font-weight:600;color:var(--px-ink-3)} /* Les boutons se rapprochent : le bloc doit tenir dans l'écran. */ .px-simu .deux{margin-top:18px} .px-simu .base{margin:14px 0 0;font-size:12.5px;line-height:1.62;color:var(--px-ink-3)} .px-simu .base b{color:var(--px-ink-2);font-weight:600} /* ── LES DEUX BLOCS DE SECTION ──────────────────────────────────────────── Il n'y a RIEN ici, et c'est le sujet. « Pourquoi recommander » reprend les vignettes du parti pris (`px-pq-partis`), « Comment rejoindre » reprend le fil du constat (`px-pq-fil`) — deux blocs de « Pourquoi Prism », déployés tels quels. J'en avais fabriqué deux autres, un troisième traitement de carte et une quatrième mise en forme de liste ; Thomas a tranché pour l'existant, et les règles sont supprimées plutôt que laissées à dormir. ⚠️ Le fil allume ses nœuds à des bornes MESURÉES, qui dépendent de la hauteur des paragraphes. Celles de la page « Pourquoi » ne valent pas ici, d'où les bornes propres à `#comment` posées plus bas. */ /* Le nom de l'étape ouvre le paragraphe. Pas de couleur propre : sinon il resterait allumé pendant que le reste de la phrase s'éteint en quittant le centre de l'écran, et le projecteur ne voudrait plus rien dire. */ #comment .px-pq-fil .etape b{font-weight:700} /* ── LE FORMULAIRE D'AFFILIATION ────────────────────────────────────────── Il est rendu par le gabarit, APRÈS le contenu de la page : il porte un jeton signé et un `nonce`, qui seraient figés au moment du déploiement s'il vivait dans le bloc HTML de la maquette. Une seule colonne centrée — contrairement à la page Contact, il n'y a rien à poser à côté : tout ce qu'il fallait dire est dit au-dessus. */ /* ⭐ LA PAGE DE CANDIDATURE TIENT DANS LE PREMIER ÉCRAN — tête ET formulaire. C'est la demande de Thomas, et elle commande toutes les valeurs qui suivent. ⚠️ Mesuré à 1440 × 780 avant retouche : il fallait 1 030 px, donc 250 de trop. Le plus gros morceau n'était pas la tête mais le TROU entre elle et le formulaire — 218 px, dont 156 de padding de section. Chaque valeur ci-dessous est un rabotage chiffré. ⚠️ Tout est porté par `.px-candi-tete`, pas par `.px-affil-tete` : la page « Affiliation » partage cette seconde classe, et son héros a été validé tel qu'il est. */ #candidature.px-affil-form{padding-top:0} .px-hero.px-hero-centre.px-candi-tete h1{font-size:clamp(26px,3.2vw,42px);margin-top:14px} .px-hero.px-hero-centre.px-candi-tete p.sous:not(.sous-2){margin-top:16px;max-width:48ch} /* ── LE PARCOURS DE CANDIDATURE ─────────────────────────────────────────── La question à gauche, ce qui est déjà répondu à droite. ⭐ TOUT CE BLOC EST DÉCORATIF AU SENS STRICT : sans JavaScript, les quatre `fieldset` s'affichent à la suite et le formulaire est un formulaire ordinaire qui part. Le script ne masque que ce qui l'est par lui. ⚠️ `min-width:0` sur le `fieldset` n'est pas décoratif : un `fieldset` a une largeur minimale intrinsèque qui déborde d'une colonne de grille. */ /* ⚠️ Les DEUX classes, et pas seulement `.px-candi` : `.px-affil-form .px-form` pèse autant et vient plus bas dans la feuille, donc ses 620 px l'emportaient en silence. C'est le piège de spécificité déjà payé quatre fois ici. */ .px-affil-form .px-form.px-candi{max-width:940px;margin:30px auto 0;padding:22px 30px 24px} /* ⚠️⚠️ L'attribut `hidden` ne cache RIEN dès qu'une règle de classe déclare un `display` : celle du navigateur, `[hidden]{display:none}`, pèse moins qu'elle. Mesuré sur la page en ligne : « Retour » ET « Continuer » s'affichaient ensemble à la dernière étape, et la jauge « 1 sur 4 » apparaissait même sans JavaScript, au-dessus d'un formulaire d'un seul tenant — c'est-à-dire qu'elle mentait. Une seule règle couvre tout ce que le parcours masque : boutons, jauge, étapes, récapitulatif. */ .px-candi [hidden]{display:none} .px-candi-cols{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:36px} .px-candi .px-etape{border:0;margin:0;padding:0;min-width:0} .px-candi .px-etape legend{padding:0 0 14px;font-family:var(--f-accroche); font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.3; color:var(--px-ink)} /* La jauge. Le compte est écrit en toutes lettres à côté des plots : quatre traits seuls ne disent pas où l'on en est. */ .px-jauge{display:flex;align-items:center;gap:14px;margin:0 0 16px} .px-jauge .compte{margin:0;display:flex;align-items:baseline;gap:5px; font-family:var(--f-titre);font-size:13px;font-weight:700;letter-spacing:-.03em; color:var(--px-ink-3)} .px-jauge .compte b{font-size:19px;color:var(--px-ink);font-weight:700} .px-jauge ol{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex:1} .px-jauge li{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.09); transition:background .3s ease,box-shadow .3s ease} .px-jauge li.fait{background:rgba(25,200,230,.45)} .px-jauge li.ici{background:var(--px-cy);box-shadow:0 0 12px -1px rgba(25,200,230,.75)} @media(prefers-reduced-motion:reduce){.px-jauge li{transition:none}} /* Les deux boutons de parcours, fabriqués par le script. « Retour » ne prend que sa place, « Continuer » occupe le reste : c'est lui qu'on cherche. */ /* Le dernier champ d'une étape n'a pas de voisin en dessous : sa marge ne séparait plus rien et coûtait 18 px de hauteur d'écran. */ .px-candi .px-etape .px-champ:last-child, .px-candi .px-etape .px-duo:last-child .px-champ{margin-bottom:0} /* ⚠️ La zone de texte porte `min-height:132px` de la feuille générale, qui l'emporte sur ses 3 lignes. Sans cette reprise, la dernière étape restait trop haute et son bouton d'envoi passait sous la ligne de flottaison. */ .px-candi textarea{min-height:80px} /* Les champs empilés de la dernière étape se resserrent : c'est ce qui ramène le bouton d'envoi au-dessus de la ligne de flottaison. */ .px-candi .px-etape .px-champ{margin-bottom:12px} .px-candi-nav{display:flex;gap:10px;margin-top:18px} .px-candi-nav .px-btn{width:auto;margin-top:0} .px-candi-nav .px-btn.cy{flex:1;text-align:center} .px-candi .px-candi-pied .px-btn{margin-top:10px} .px-candi .px-mention{margin-top:12px} /* Le récapitulatif. Une colonne qui se remplit, jamais un cadre : le filet de gauche s'éteint vers le bas, comme partout ailleurs sur le site. */ .px-candi-recap{position:sticky;top:120px;align-self:start;padding:2px 0 6px 22px} .px-candi-recap::before{content:'';position:absolute;left:0;top:4px;bottom:8px; width:2px;border-radius:2px; background:linear-gradient(180deg,var(--px-cy),transparent 88%)} .px-candi-recap .px-lbl{margin:0 0 12px} /* ⚠️ C'est la colonne de droite qui commande la HAUTEUR de la carte : elle compte ses sept lignes quelle que soit l'étape affichée. Mesuré : 149 px de vide sous la mention à l'étape 1. Resserrer cet écart est donc le levier de la ligne de flottaison, pas les marges du formulaire. */ .px-candi-recap dl{margin:0;display:flex;flex-direction:column;gap:9px} .px-candi-recap dt{font-size:11px;font-weight:600;letter-spacing:.03em; color:var(--px-ink-4);margin-bottom:2px} .px-candi-recap dd{margin:0;font-family:var(--f-accroche);font-size:13.5px; font-weight:500;line-height:1.35;color:var(--px-ink);overflow-wrap:anywhere; transition:color .25s ease} /* Ce qui n'est pas encore répondu s'efface, sans disparaître : la place est tenue, donc la colonne ne saute pas à chaque validation. */ .px-candi-recap [data-vide="oui"] dd{color:var(--px-ink-4)} @media(prefers-reduced-motion:reduce){.px-candi-recap dd{transition:none}} @media(max-width:900px){ .px-candi-cols{grid-template-columns:1fr;gap:28px} /* ⚠️⚠️ `position:static` FAISAIT TRAVERSER TOUT LE FORMULAIRE PAR LE FILET. Le récapitulatif porte un `::before` en `position:absolute` — le trait cyan qui le borde à gauche. En `sticky`, le récapitulatif lui servait de repère ; en `static`, il n'en est plus un, et le filet allait se caler sur l'ancêtre positionné le plus proche. Mesuré : 767 px de haut au lieu de la hauteur du récapitulatif, une barre en travers du formulaire entier. `relative` retire le collage sans retirer le repère. ⚠️⚠️ ET IL FAUT REMETTRE `top` À `auto` DANS LE MÊME GESTE. Le `top:120px` de la règle de base est le point de COLLAGE d'un `sticky` — inerte tant que la position est `static`. En `relative`, il redevient un DÉCALAGE : mesuré, le récapitulatif poussé 120 px plus bas, donc 95 px sous le bas de la carte. Le premier correctif rentrait la barre et sortait le récapitulatif. */ .px-candi-recap{position:relative;top:auto;padding-top:22px} .px-candi .px-etape legend{font-size:19px} } .px-affil-form .px-form{max-width:620px;margin:38px auto 0} /* Deux champs par ligne, parce que ce sont des PAIRES : prénom et nom, société et site, email et téléphone. Sous 560 px on les remet l'un sous l'autre — deux champs de 120 px ne se remplissent pas au pouce. */ .px-form .px-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} @media(max-width:560px){.px-form .px-duo{grid-template-columns:1fr}} .px-affil-form .px-recu{max-width:620px;margin-inline:auto} .px-affil-form-sous{margin:16px auto 0;max-width:56ch;font-family:var(--f-accroche); font-size:16px;line-height:1.6;color:var(--px-ink-2)} /* Le menu déroulant. ⚠️ `appearance:none` supprime AUSSI le chevron du navigateur : sans le dessin ci-dessous, plus rien ne dirait que ce champ s'ouvre — exactement l'inverse de la règle du dépôt. Le chevron est un SVG en ligne, donc aucune requête et aucune image à déployer. */ .px-form select{appearance:none;-webkit-appearance:none;cursor:pointer; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%2378818F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:16px} /* Les options sont dessinées par le système et non par la page : on ne peut leur donner qu'un fond et une couleur. Sans ça, elles s'affichent en noir sur blanc dans un menu sombre. */ .px-form select option{background:#131A22;color:var(--px-ink)} /* ⚠️ Les bornes d'allumage des nœuds se MESURENT, elles ne se devinent pas — la feuille le dit déjà pour « Pourquoi Prism », et la démonstration est faite ici : les paragraphes de cette page sont plus courts, donc les nœuds tombent ailleurs. Mesuré sur la page en ligne, ils sont aux fractions 0,253 / 0,595 / 0,938 de la hauteur du fil, contre 0,227 / 0,579 / 0,932 là-bas. Ramené à la plage de tracé [15 %, 85 %] — soit 15 + fraction × 70 — ça donne 32,7 / 56,7 / 80,7 au lieu de 30,9 / 55,5 / 80,2. */ @supports (animation-timeline: view()) { @media(prefers-reduced-motion:no-preference){ #comment .px-pq-fil p:nth-of-type(1)::before{animation-range:cover 32.7% cover 36.7%} #comment .px-pq-fil p:nth-of-type(2)::before{animation-range:cover 56.7% cover 60.7%} #comment .px-pq-fil p:nth-of-type(3)::before{animation-range:cover 80.7% cover 84.7%} } } @media(max-width:900px){ .px-simu{padding:20px 18px 22px} .px-simu .resultats{grid-template-columns:1fr;gap:16px} } /* Le conteneur n'est plus qu'une colonne : c'est la BARRE qui est le bloc. */ .px-hero-bloc{margin:56px auto 0;max-width:720px} /* ── LA BARRE ───────────────────────────────────────────────────────────── Deux étages, comme une conversation qui attend : la question en haut, ce qui répond et ce qu'on peut faire en bas. ⚠️ Elle a l'allure d'un champ, elle n'en est pas un : aucun `input`, aucune saisie possible, `aria-hidden` sur les deux étages et le texte équivalent posé hors écran. Le jour où Néo répond, elle devient un vrai champ sans changer d'allure. */ /* Le verre des vignettes du parti pris, repris tel quel : la couleur entre par le bord gauche et s'éteint vers la droite. Toute la page partage ce geste — une couleur qui vient d'un bord, jamais un fond coloré. */ .px-barre{--a:var(--px-cy); position:relative;display:flex;flex-direction:column;gap:18px; padding:18px 18px 18px 20px;border-radius:var(--px-r); background:linear-gradient(90deg, color-mix(in srgb,var(--a) 24%,transparent), color-mix(in srgb,var(--a) 7%,transparent) 44%, rgba(255,255,255,.022) 86%); border:1px solid rgba(255,255,255,.09); border-left:2px solid var(--a); backdrop-filter:blur(20px) saturate(1.32);-webkit-backdrop-filter:blur(20px) saturate(1.32); box-shadow:inset 1px 0 0 color-mix(in srgb,var(--a) 42%,transparent), inset 0 1px 0 rgba(255,255,255,.12), -14px 0 36px -26px color-mix(in srgb,var(--a) 85%,transparent), 0 20px 46px -28px rgba(0,0,0,.9)} /* — L'étage du haut : la question — */ .px-barre .demande{display:flex;align-items:center;gap:12px;padding:6px 0 2px} .px-barre .signe{flex:none;width:26px;height:26px;display:flex;align-items:center; justify-content:center;border-radius:8px;color:#0A1016; background:linear-gradient(140deg,#8FE9F8,#6E6BFF)} .px-barre .signe svg{width:15px;height:15px} /* La question s'ÉCRIT lettre à lettre — un fondu donnait l'impression d'un contenu remplacé, la frappe celle d'une question posée. */ .px-barre .dit{flex:1;text-align:left;font-family:var(--f-accroche);font-size:16px; color:var(--px-ink);white-space:nowrap;overflow:hidden;min-height:21px} /* — L'étage du bas : qui répond, et ce qu'on peut faire — */ .px-barre .pied{display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap} .px-barre .agent{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 9px; border-radius:99px;font-family:var(--f-accroche);font-size:13.5px;font-weight:600; color:var(--px-ink-2);background:rgba(255,255,255,.045);border:1px solid var(--px-rule)} .px-barre .agent .marque{width:18px;height:18px;border-radius:50%;flex:none; background:linear-gradient(140deg,#8FE9F8,#6E6BFF); box-shadow:0 0 10px 1px rgba(120,190,255,.45)} .px-barre .boutons{display:flex;gap:9px;flex-wrap:wrap} .px-barre .boutons .px-btn{display:inline-flex;align-items:center;gap:7px; padding:11px 18px;font-size:13.5px} .px-barre .boutons .px-btn svg{width:14px;height:14px} /* Les mentions de réassurance, posées SOUS la barre et non dedans : elles accompagnent le geste, elles n'en font pas partie. */ .px-hero-bloc .rassure{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:16px; margin:18px 0 0;padding:0} .px-hero-bloc .rassure li{display:inline-flex;align-items:center;gap:7px;font-size:12px; font-weight:600;color:var(--px-ink-3);white-space:nowrap} .px-hero-bloc .rassure li::before{content:'';width:4px;height:4px;border-radius:50%;flex:none; background:var(--px-cy);box-shadow:0 0 8px 1px rgba(25,200,230,.7)} /* ⚠️ La troisième ligne SUIT la promesse : même corps, même couleur, aucune marge. Les deux se lisent comme un seul paragraphe passé à la ligne, pas comme deux blocs séparés. */ .px-hero.px-hero-centre .tiers{margin:0 auto;font-family:var(--f-accroche); font-size:17.5px;line-height:1.6;color:var(--px-ink-2);max-width:none;white-space:nowrap} /* Le texte réservé aux lecteurs d'écran : la barre étant décorative, les questions doivent rester accessibles autrement. */ .px-hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} @media(max-width:900px){ .px-hero.px-hero-centre{padding-top:18px;max-width:none} .px-hero.px-hero-centre h1,.px-hero.px-hero-centre p.sous:not(.sous-2){white-space:normal} .px-hero-bloc{margin-top:36px} .px-barre{padding:14px 14px 14px 15px;gap:14px} .px-barre .pied{flex-direction:column;align-items:stretch} .px-barre .agent{align-self:flex-start} .px-barre .boutons{flex-direction:column} .px-barre .boutons .px-btn{width:100%;justify-content:center;padding:13px 18px} .px-hero.px-hero-centre .tiers{white-space:normal} } /* ── LE HÉROS : L'ANALYSE, AU-DESSUS DES CHIFFRES ───────────────────────── ⚠️ Le panneau ne montrait qu'un graphe et des nombres — c'est-à-dire un tableau de bord, exactement ce que la marque dit ne pas être. La bande d'analyse règle ça : on lit la conclusion d'abord, les chiffres viennent la prouver. C'est le produit dans sa forme, pas seulement dans ses données. */ .px-scene .analyse{padding:15px 20px 16px;border-bottom:1px solid var(--px-rule); background:linear-gradient(120deg,rgba(25,200,230,.055),transparent 62%)} /* Le micro-titre perd son filet et se resserre : dans un panneau de cette taille, la version commune écrase la phrase qu'elle annonce. */ .px-scene .analyse .px-lbl{font-size:9px;letter-spacing:.19em;color:var(--px-ink-4); margin-bottom:9px} .px-scene .analyse .px-lbl::before{display:none} .px-scene .analyse p{font-family:var(--f-accroche);font-size:13px;line-height:1.62; font-weight:400;color:var(--px-ink-2);margin:0;letter-spacing:-.005em} .px-scene .analyse b{color:var(--px-ink);font-weight:600} /* ⚠️ Pas de soulignement sous le chiffre : sur du texte, un trait sous un nombre se lit comme un lien. Une pastille très discrète le détache sans l'annoncer comme cliquable. */ .px-scene .analyse .marq{color:#9FE4F2;font-weight:600; padding:1px 6px;border-radius:5px;background:rgba(25,200,230,.13)} /* un en-tête de section centré — utilisé par les tarifs, où l'axe central sert la comparaison des trois offres */ .px-sec-tete.px-centre{text-align:center;margin-inline:auto} .px-sec-tete.px-centre .px-lbl{justify-content:center} .px-sec-tete.px-centre .px-lbl::before{display:none} /* ══════════════════════════════════════════════════════════════════════════ LA LANDING SUR PETIT ÉCRAN Deux paliers seulement. À 1080 px les grilles à plusieurs colonnes s'effondrent ; à 820 px c'est le doigt qui commande — les rails défilent, les cartes se calent sur la largeur de l'écran. La scène du problème est le seul composant qui change de nature : le visuel passe de « collé à côté du texte » à « collé en haut de l'écran », et le texte défile dessous. La mécanique est conservée, la disposition non — c'est la seule façon de garder deux colonnes sur une largeur qui n'en accepte qu'une. ══════════════════════════════════════════════════════════════════════════ */ @media(max-width:1080px){ .px-panneau{grid-template-columns:1fr;gap:32px} .px-croire{grid-template-columns:1fr;gap:16px} .px-pour{grid-template-columns:1fr;gap:14px} /* Empilées, l'offre ouverte n'a plus besoin d'être surélevée — le décalage ne ferait qu'ouvrir un blanc au milieu de la pile. */ .px-grille-tarifs{grid-template-columns:1fr;max-width:480px} /* ⚠️ SIXIÈME fois que la spécificité mord. `.px-sec .px-bascule{width:fit-content}` pèse plus que `.px-bascule` et gardait la largeur naturelle : mesuré à 320 px, le sélecteur faisait 290 de large posé à 34, donc 4 px hors de l'écran. Le sélecteur porte désormais les deux classes. */ .px-sec .px-bascule{width:100%;justify-content:center} .px-bascule button{flex:1;justify-content:center;padding:11px 12px;font-size:13px} .px-tarif.px-ouverte{transform:none} .px-tarif.px-ouverte:hover{transform:translateY(-3px)} /* ⚠️ LA SCÈNE PERD SON VISUEL SUR PETIT ÉCRAN — décision assumée. En une seule colonne, le panneau collant recouvre le texte qui défile dessous et coupe les titres en plein milieu : on lisait « …back-office. » sans son début. Vérifié à l'écran en 375 px, ce n'est pas rattrapable par un fond opaque — le texte passe dessous, c'est le principe même du collant. Deux sorties existaient : masquer le visuel, ou le dupliquer en clair dans chaque constat. La seconde donnerait le visuel sur mobile aussi, au prix d'un doublon du balisage. En attendant l'arbitrage, on garde le texte lisible — c'est lui qui porte le sens. */ .px-scene-probs{grid-template-columns:1fr;gap:0} .px-scene-visuel{display:none} .px-constat{min-height:auto;padding:26px 0;opacity:1} .px-constat:first-child{padding-top:8px} .px-constat h3{max-width:none} /* Sans le visuel, un filet remplace la mise en scène : il rend la suite de constats lisible comme une progression plutôt que comme cinq paragraphes. */ .px-constat+.px-constat{border-top:1px solid var(--px-rule)} } @media(max-width:820px){ .px-sec{padding-top:104px} .px-final{margin-top:104px;padding:44px 22px} .px-final ul{grid-template-columns:1fr} .px-tarif{padding:26px 22px 28px} /* La story : moins de marges, et une scène qui s'adapte plutôt que de réserver la hauteur du plus long acte — sur un téléphone, ce vide-là coûte un demi-écran. */ /* Une seule colonne : le visuel passe sous le texte, et la scène ne réserve plus la hauteur du plus long acte — sur un téléphone ce vide coûte un demi-écran. */ .px-story-acte.px-actif{grid-template-columns:1fr;gap:24px} /* ⚠️ `.px-svue` porte `margin-right:-84px` : sur grand écran elle sort du cadre à droite, et c'est voulu. Sur une colonne unique, ce même débord sort de l'ÉCRAN — mesuré à 390 px : 364 px de large dans un parent de 280. Le débord n'a plus de cadre d'où sortir, on le remet à zéro. */ .px-svue{margin-right:0} .px-story-scene{padding:24px 20px;min-height:auto} .px-story-barres{padding:12px 18px 0} .px-story-fenetre{padding:11px 18px} /* La période de comparaison saute : sur une barre de 300 px, elle mangerait le mot qui compte. */ .px-story-fenetre .titre em{display:none} .px-story-cmd{padding:16px 20px 18px} .px-story-acte .lbl{font-size:17.5px} .px-story-acte .txt{font-size:15.5px} .px-doc-chiffres div{flex:1 1 132px;min-width:0} /* Les cartes de constat se calent sur la largeur de l'écran, en laissant dépasser la suivante : c'est ce débordement qui dit qu'il y en a d'autres. */ .px-trouv-piste li{flex-basis:84%} .px-trouv .vue{min-height:132px;padding:18px 20px 16px} .px-trouv .dit{padding:14px 20px 18px;font-size:13.5px} .px-scene-visuel{height:212px} .px-vis .px-card{padding:18px 20px} .px-quatre{gap:8px} .px-quatre div{padding:10px 11px} .px-quatre b{font-size:15px} /* Le troisième schéma pose deux blocs côte à côte : ils s'empilent. */ .px-provenance{padding:14px} .px-prov-duo{flex-direction:column;align-items:stretch} .px-faq summary{font-size:15.5px;padding-right:28px} .px-faq details{padding:17px 0} } /* Sous 480 px, le rail des onglets déborde des marges de la page plutôt que de comprimer ses libellés : on préfère un défilement franc à quatre mots écrasés. */ @media(max-width:480px){ /* `max-width:none` est indispensable : sans lui, le `max-width:100%` de la règle de base annule le débordement et la barre reste enfermée dans les marges — la règle passait sans rien faire. */ /* La barre saigne jusqu'aux bords de l'écran et défile. ⚠️ `width:auto` la laissait se dimensionner sur son contenu : mesuré à 320 px, elle sortait de 13 px. Une largeur EXPLICITE — la colonne plus les deux marges négatives — la cale exactement sur l'écran. */ .px-onglets-barre{margin-inline:-34px;padding-inline:34px;border-radius:0; border-left:0;border-right:0;width:calc(100% + 68px);max-width:none; /* ⚠️ La largeur explicite ne suffisait pas : un élément flex a un `min-width:auto` qui le force à la taille de son CONTENU, largeur déclarée ou non. Mesuré à 320 px : 333 au lieu de 320. Même famille que le `min-width:0` des `fieldset`. */ min-width:0} .px-trouv-piste li{flex-basis:90%} } /* ════════════════════════════════════════════════════════════════════════ PAGE « POURQUOI PRISM » ════════════════════════════════════════════════════════════════════════ Une page de récit, pas de démonstration produit : le texte porte, les visuels ponctuent. D'où le réemploi maximal de ce qui existe déjà — lecture suivie, onglets, vignettes teintées, appel final — et un jeu de règles propres réduit aux illustrations que ces sections demandent. La dispersion suit la règle du dépôt : une série part du rose et converge vers le cyan de la marque. */ /* ── 1 · ACCROCHE ────────────────────────────────────────────────────── Une seule colonne, centrée : la page s'ouvre sur une adresse au lecteur, pas sur une démonstration. Mais elle prend toute la largeur dont elle dispose — à 860 px dans un écran large, le héros paraissait tassé. */ /* 96 px sous la navigation, c'était l'écart d'un héros qui a quelque chose à sa droite. Celui-ci est une adresse au lecteur : il commence plus haut. */ .px-pq-hero{padding:54px 0 0;max-width:1120px;margin-inline:auto;text-align:center} .px-pq-hero .px-lbl{justify-content:center} /* Le tiret du libellé tire l'œil vers la gauche dès qu'on centre. */ .px-pq-hero .px-lbl::before{display:none} .px-pq-hero h1{margin:20px 0 0;font-size:clamp(34px,5vw,64px)} /* Le même dégradé que sur le titre de l'accueil, posé sur « Pourquoi ». */ .px-pq-hero h1 em{font-style:normal;background:linear-gradient(96deg,#8FE9F8,#6E6BFF); -webkit-background-clip:text;background-clip:text;color:transparent} .px-pq-hero .amorce{font-family:var(--f-accroche);font-size:20px;line-height:1.6; color:var(--px-ink-2);margin:28px auto 0;max-width:60ch} /* Les trois décisions du premier paragraphe. Mêmes mots, posés côte à côte : ce sont trois questions du même ordre, pas une liste qu'on parcourt. Les voir d'un coup dit qu'elles se posent toutes en même temps. La couleur entre par le bord HAUT et s'éteint vers le bas — la grammaire de la page, appliquée à l'orientation qui convient à une rangée. */ .px-pq-questions{list-style:none;margin:46px auto 0;padding:0;max-width:none; display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .px-pq-questions li{position:relative;display:flex;align-items:center;justify-content:center; min-height:112px;padding:28px 24px 26px;border-radius:var(--px-r-sm);overflow:hidden; font-family:var(--f-accroche);font-size:16.5px;font-weight:500;line-height:1.45; letter-spacing:-.01em;color:var(--px-ink);text-align:center;text-wrap:balance; background:linear-gradient(180deg, color-mix(in srgb,var(--a) 16%,transparent), color-mix(in srgb,var(--a) 4%,transparent) 46%, rgba(255,255,255,.022) 88%); border:1px solid rgba(255,255,255,.075); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--a) 42%,transparent), 0 -14px 34px -26px color-mix(in srgb,var(--a) 85%,transparent)} /* Le filet du haut, plein au centre et éteint aux extrémités. */ .px-pq-questions li::before{content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--a) 22%,var(--a) 78%,transparent)} /* La phrase mise en avant, reprise du héros de l'accueil — `p.sous.sous-2`. Il lui faut le fond en dégradé, l'arrondi, la lueur qui sort par la gauche et le liseré intérieur : le filet seul ne suffit pas, les deux blocs n'auraient rien à voir. Seule la couleur change, prise à la section. ⚠️ Cette règle vit ICI, dans le bloc de l'accroche, alors qu'elle habille toute la page. Elle a déjà été emportée une fois en réécrivant ce bloc par position — à déplacer si l'accroche est réécrite. */ .px-pq-hero .px-chute,.px-pq-duo .texte p.px-chute,.px-pq-conv .texte p.px-chute, .px-pq-nom-seul .texte p.px-chute, /* ⚠️ L'accueil aussi : le traitement avait été construit pour « Pourquoi Prism » et n'avait jamais été porté ici, si bien que ses quatre chutes gardaient l'ancien filet nu. */ .px-panneau .px-chute,.px-croire .px-chute{ margin-top:26px;padding:16px 24px 16px 22px; border-left:3px solid var(--a,var(--px-cy)); border-radius:0 var(--px-r-sm) var(--px-r-sm) 0; font-family:var(--f-accroche);font-size:16.5px;line-height:1.5;color:#fff; font-weight:500;letter-spacing:-.015em; background:linear-gradient(90deg, color-mix(in srgb,var(--a,var(--px-cy)) 20%,transparent), color-mix(in srgb,var(--a,var(--px-cy)) 5%,transparent) 58%,transparent 94%); box-shadow:-16px 0 38px -24px color-mix(in srgb,var(--a,var(--px-cy)) 90%,transparent), inset 1px 0 0 color-mix(in srgb,var(--a,var(--px-cy)) 35%,transparent)} .px-pq-hero .px-chute b,.px-pq-conv .texte p.px-chute b{color:var(--px-ink);font-weight:700} .px-pq-suite{margin:38px auto 0;max-width:58ch;text-align:left} /* ── 2 · LE CONSTAT ──────────────────────────────────────────────────── */ /* ⚠️ Ces trois paragraphes ne sont pas trois constats indépendants : c'est une seule chaîne de raisonnement — « Et malheureusement… Pourtant… Ce qui manque… Alors on décide… ». La lecture suivie de l'accueil les isolait, en éteignait deux sur trois et les étalait sur trois écrans : elle cassait la chaîne à trois endroits. Elle marche là-bas parce que les constats y sont des symptômes indépendants, qu'on peut prendre dans le désordre. Ici, non. D'où une colonne de lecture continue. Ici, non. D'où une colonne de lecture continue. */ /* ── LE FIL QUI RELIE ───────────────────────────────────────────────── L'inverse de ce qui avait cassé la chaîne : au lieu de découper le raisonnement, la mise en page le REND VISIBLE. Le fil descend au milieu, les paragraphes se posent alternativement de part et d'autre. `--g` est la gouttière : les nœuds et le fil s'en déduisent, il n'y a qu'une valeur à changer pour resserrer l'ensemble. */ /* Le fil descend un moment seul avant d'atteindre le premier paragraphe : c'est ce trajet à vide qui installe la section. Le rail part du haut du conteneur, les paragraphes commencent 150 px plus bas. */ .px-pq-fil{--g:118px;position:relative;margin:40px auto 0;max-width:1080px; padding-top:150px; display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g);row-gap:172px; view-timeline-name:--fil;view-timeline-axis:block} /* La section démarre plus haut que les autres : le fil doit commencer à se dérouler quand la lecture est au milieu de l'écran, pas en bas. */ #constat{padding-top:88px} /* Le rail éteint, puis le fil qui se trace par-dessus. */ .px-pq-fil::before,.px-pq-fil .trace{content:'';position:absolute;left:50%;margin-left:-1px; top:0;bottom:0;width:2px;border-radius:1px} .px-pq-fil::before{background:var(--px-rule)} .px-pq-fil .trace{transform-origin:top; background:linear-gradient(180deg,var(--px-s1),var(--px-s2) 52%,var(--px-cy))} /* Le bout du fil. Il descend le long du rail au même rythme que le fil s'étire, puisque les deux lisent la même frise. Quatre couches plutôt qu'un rond, et surtout : IL PREND LA COULEUR DE CE QU'IL TRACE. `--tc` suit le dégradé du fil — rose, violet, cyan — sur la même frise, et la traîne comme le halo la lisent. Seul le cœur reste blanc, parce que c'est lui qui doit se lire comme de la lumière et non comme une pastille colorée. Une comète qui disperse la lumière : c'est le prisme. ⚠️ `--tc` est déclarée en @property, sinon une couleur ne s'interpole pas et le bout changerait de teinte par à-coups. */ @property --tc{syntax:'';inherits:true;initial-value:#19C8E6} .px-pq-fil .tete{position:absolute;left:50%;top:0;width:0;height:0;opacity:0;--tc:#FF5FA8} /* la traîne : la couleur du fil qui vient d'être tracé, blanchie au bout */ .px-pq-fil .tete::before{content:'';position:absolute;left:-2.5px;bottom:-2px;width:5px;height:150px; border-radius:3px;filter:blur(2.5px); background:linear-gradient(180deg,transparent, color-mix(in srgb,var(--tc) 34%,transparent) 46%, color-mix(in srgb,var(--tc) 78%,white) 84%,#FFFFFF)} /* le halo : large, très diffus, dans la teinte du moment */ .px-pq-fil .tete::after{content:'';position:absolute;left:-40px;top:-40px;width:80px;height:80px; border-radius:50%;filter:blur(9px); background:radial-gradient(closest-side, color-mix(in srgb,var(--tc) 62%,white) 0%, color-mix(in srgb,var(--tc) 46%,transparent) 34%,transparent 72%)} /* le cœur : petit, blanc, net */ .px-pq-fil .tete i{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%; background:#FFFFFF; box-shadow:0 0 6px 1px #FFFFFF, 0 0 15px 4px color-mix(in srgb,var(--tc) 85%,white), 0 0 40px 13px color-mix(in srgb,var(--tc) 40%,transparent)} /* l'onde : un anneau qui s'échappe du cœur, deux fois par seconde et demie */ .px-pq-fil .tete i::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px; margin:-3.5px 0 0 -3.5px;border-radius:50%; border:1px solid color-mix(in srgb,var(--tc) 70%,white)} @media(prefers-reduced-motion:no-preference){ .px-pq-fil .tete i::after{animation:px-onde 2.4s cubic-bezier(.2,.6,.3,1) infinite} } @keyframes px-onde{ 0% {transform:scale(1);opacity:.75} 70% {transform:scale(5.2);opacity:0} 100%{transform:scale(5.2);opacity:0} } @keyframes px-teinte-bout{0%{--tc:#FF5FA8}52%{--tc:#A66BFF}100%{--tc:#19C8E6}} @supports (animation-timeline: view()) { @media(prefers-reduced-motion:no-preference){ .px-pq-fil .trace{transform:scaleY(0);animation:px-fil linear both; animation-timeline:--fil;animation-range:cover 15% cover 85%} .px-pq-fil .tete{animation:px-tete linear both,px-teinte-bout linear both; animation-timeline:--fil,--fil; animation-range:cover 15% cover 85%,cover 15% cover 85%} /* ⚠️ Chaque nœud s'allume au passage du bout, et les bornes ne se devinent pas : elles ont été MESURÉES. Les nœuds tombent aux fractions 0,227 / 0,579 / 0,932 de la hauteur du fil, une fois comptés les 150 px de trajet à vide en tête. Ramené à la plage de tracé [15 %, 85 %], ça donne 30,9 / 55,5 / 80,2. ⚠️ Ces bornes dépendent de la géométrie : toute retouche de `padding-top` ou de `row-gap` les décale. Rallonger le fil de 150 px a fait dériver le premier nœud de 10 points. À REMESURER, pas à deviner. */ .px-pq-fil p:nth-of-type(1)::before{animation:px-noeud linear both; animation-timeline:--fil;animation-range:cover 29% cover 33%} .px-pq-fil p:nth-of-type(2)::before{animation:px-noeud linear both; animation-timeline:--fil;animation-range:cover 54% cover 58%} .px-pq-fil p:nth-of-type(3)::before{animation:px-noeud linear both; animation-timeline:--fil;animation-range:cover 78% cover 82%} } } @keyframes px-fil{to{transform:scaleY(1)}} @keyframes px-tete{from{opacity:0;top:0}5%{opacity:1}95%{opacity:1}to{opacity:0;top:100%}} /* ⭐ LA MÊME COURSE, MAIS COMPOSÉE. `top` est une propriété de MISE EN PAGE : l'animer oblige le navigateur à recalculer la position à chaque image, et c'est ce qui faisait saccader le bout alors que la trace, qui anime un `transform`, restait fluide. La traîne et le halo étant des pseudo-éléments de `.tete`, ils suivent la translation sans qu'on ait à les toucher — et `.tete` garde sa hauteur nulle, donc rien ne se décale. ⚠️ `--h` vaut la hauteur du fil, posée par `prism.js` : un pourcentage de translation se mesurerait sur la hauteur de l'élément, qui est nulle ici. */ @keyframes px-tete-glisse{ from{opacity:0;transform:translateY(0)} 5% {opacity:1} 95% {opacity:1} to {opacity:0;transform:translateY(var(--h,1200px))}} /* ⚠️ Une frise de défilement ne s'applique QUE tant qu'elle est active : dès que la section a fini de sortir de l'écran, l'animation est retirée et le nœud redevenait éteint — le dernier, allumé à 79 % de la course, s'éteignait presque aussitôt. On garde donc un état allumé permanent, posé par l'observateur d'apparition, sous l'animation : celle-ci l'emporte tant qu'elle tourne, et le relaie quand elle s'arrête. */ .px-pq-fil .etape.px-in::before{transform:scale(1.28); border-color:color-mix(in srgb,var(--a) 55%,white);background:var(--a); box-shadow:0 0 14px 3px color-mix(in srgb,var(--a) 88%,transparent), 0 0 34px 9px color-mix(in srgb,var(--a) 44%,transparent), 0 0 72px 22px color-mix(in srgb,var(--a) 18%,transparent)} /* Le « pop ». La plage ne fait que 4 % de la course, donc ce dépassement se traverse vite : le nœud gonfle d'un coup, retombe, et reste un peu plus gros qu'avant. C'est ce dernier point qui fait qu'il a l'air allumé et non simplement coloré. */ @keyframes px-noeud{ 0% {transform:scale(1);border-color:var(--px-rule);background:var(--px-bg);box-shadow:none} 45% {transform:scale(2);border-color:color-mix(in srgb,var(--a) 30%,white);background:var(--a); box-shadow:0 0 22px 7px color-mix(in srgb,var(--a) 95%,transparent), 0 0 54px 18px color-mix(in srgb,var(--a) 55%,transparent)} 72% {transform:scale(1.12)} 100%{transform:scale(1.28);border-color:color-mix(in srgb,var(--a) 55%,white);background:var(--a); box-shadow:0 0 14px 3px color-mix(in srgb,var(--a) 88%,transparent), 0 0 34px 9px color-mix(in srgb,var(--a) 44%,transparent), 0 0 72px 22px color-mix(in srgb,var(--a) 18%,transparent)}} .px-pq-fil .etape{position:relative;font-size:18px;line-height:1.8;color:var(--px-ink-2);margin:0} /* ⚠️ Ces paragraphes portent `px-rv` UNIQUEMENT pour que l'observateur leur pose `px-in`, dont le nœud a besoin pour rester allumé. On annule donc son apparition : c'est le projecteur qui gère leur venue, pas elle. */ .px-pq-fil .etape.px-rv{opacity:1;transform:none;transition:none} .px-pq-fil p:nth-of-type(1){grid-column:1;grid-row:1;text-align:right} .px-pq-fil p:nth-of-type(2){grid-column:2;grid-row:2} .px-pq-fil p:nth-of-type(3){grid-column:1;grid-row:3;text-align:right} /* ⚠️ `box-sizing` doit être posé explicitement : la règle universelle du thème ne s'applique PAS aux pseudo-éléments. Sans elle, les bordures s'ajoutaient à la largeur et chaque nœud tombait à 2 px de l'axe, d'un côté pour les impairs, de l'autre pour les pairs. */ .px-pq-fil .etape::before{content:'';box-sizing:border-box;position:absolute; top:calc(50% - 7px);width:14px;height:14px;border-radius:50%; background:var(--px-bg);border:2px solid var(--px-rule)} .px-pq-fil p:nth-of-type(odd)::before{right:calc(-1 * (var(--g) / 2 + 7px))} .px-pq-fil p:nth-of-type(even)::before{left:calc(-1 * (var(--g) / 2 + 7px))} /* Le projecteur. Un paragraphe s'éclaire en ARRIVANT au centre de l'écran et se rééteint en le quittant : ce qui n'est pas au centre n'est jamais pleinement visible, ni avant ni après. ⚠️ L'effet était piloté phrase par phrase, et c'était une erreur. Chaque phrase avait SA propre frise, donc dans un paragraphe centré les premières avaient déjà dépassé leur sommet pendant que les dernières ne l'avaient pas atteint : le texte s'effaçait sous les yeux de qui le lisait. L'unité de lecture est le paragraphe, c'est donc lui qui porte l'animation. Le plateau couvre 30 % de la course — 35 % à 65 % — pour qu'un paragraphe reste entièrement lisible tant qu'il est à l'écran, et ne se fane qu'aux deux extrémités. */ @supports (animation-timeline: view()) { @media(prefers-reduced-motion:no-preference){ .px-pq-fil .etape{color:var(--px-fondu);animation:px-projecteur linear both; animation-timeline:view();animation-range:cover 0% cover 100%} } } /* La lueur est en deux temps : une halo serré qui donne du corps aux lettres, et un large qui fait rayonner le bloc. Un seul des deux paraît soit sale, soit fade. */ @keyframes px-projecteur{ 0% {color:var(--px-fondu);text-shadow:none} 35%,65% {color:var(--px-ink); text-shadow:0 0 11px rgba(226,244,250,.30),0 0 40px rgba(226,244,250,.52)} 100% {color:var(--px-fondu);text-shadow:none} } /* ── 2 · LE CONSTAT — visuels ───────────────────────────────────────── */ .px-pq-note{margin:18px 0 0;font-size:13px;line-height:1.5;color:var(--px-ink-3)} .px-pq-echelle{display:flex;align-items:center;gap:14px} .px-pq-echelle .bout{flex:none;width:104px;font-size:12px;line-height:1.35;color:var(--px-ink-3)} .px-pq-echelle .bout.droite{text-align:right} .px-pq-echelle .barre{flex:1;height:6px;border-radius:3px;position:relative; background:linear-gradient(90deg,var(--px-s3),var(--px-cy))} .px-pq-echelle .barre i{position:absolute;inset:-4px;border-radius:7px; background:linear-gradient(90deg,var(--px-s3),var(--px-cy));opacity:.28;filter:blur(6px)} /* ── 3 · LE BROUILLARD ───────────────────────────────────────────────── */ /* Le texte se cale au milieu du visuel plutôt qu'en haut : les deux blocs n'ont pas la même hauteur, et aligner par le sommet laissait le texte flotter au-dessus de rien. */ .px-pq-duo{margin-top:52px;display:grid;grid-template-columns:minmax(0,1fr) 1fr;gap:56px; align-items:center} .px-pq-duo .texte p{font-size:16px;line-height:1.7;color:var(--px-ink-2);margin:0 0 20px} .px-pq-echelles{margin-top:0} /* Le panneau redevient une colonne : ici il ne porte qu'un visuel. */ .px-pq-vue{grid-template-columns:1fr;gap:0} .px-pq-echelles .px-lbl{font-size:9.5px;letter-spacing:.12em} .px-pq-echelles .px-pq-note{margin-top:12px;font-size:12px} /* ⚠️ Le panneau écrasait la colonne de texte d'à côté : une tuile de 132 px de haut portant un seul mot, dans une carte de 26 px de marge. Tout est ramené à l'échelle d'une interface, pas d'une affiche. */ .px-pq-tuiles{display:grid;gap:6px;margin:12px 0 0} .px-pq-tuiles span{display:flex;align-items:center;justify-content:center;text-align:center; padding:12px 10px;border-radius:var(--px-r-sm);font-family:var(--f-accroche);font-size:12.5px; font-weight:600;color:var(--px-ink);background:color-mix(in srgb,var(--a) 11%,transparent); border:1px solid color-mix(in srgb,var(--a) 40%,transparent)} .px-pq-tuiles.une{grid-template-columns:1fr} .px-pq-tuiles.une span{min-height:58px;font-size:14px} /* Six vues qui ne se recoupent pas : elles se chevauchent, se décalent, et l'ensemble perd sa netteté. C'est l'illustration littérale du texte. */ .px-pq-tuiles.six{grid-template-columns:repeat(3,1fr);gap:8px} .px-pq-tuiles.six span{min-height:40px;line-height:1.2;font-size:11px;padding:8px 6px} .px-pq-tuiles.six span:nth-child(1){transform:rotate(-2.2deg) translateY(3px)} .px-pq-tuiles.six span:nth-child(2){transform:rotate(1.6deg) translateY(-4px)} .px-pq-tuiles.six span:nth-child(3){transform:rotate(-1.1deg) translateY(5px)} .px-pq-tuiles.six span:nth-child(4){transform:rotate(2.4deg) translateY(-2px)} .px-pq-tuiles.six span:nth-child(5){transform:rotate(-1.8deg) translateY(4px)} .px-pq-tuiles.six span:nth-child(6){transform:rotate(1.2deg) translateY(-5px)} .px-pq-tete-floue .px-pq-tuiles{filter:blur(.35px)} .px-pq-tete-claire,.px-pq-tete-floue{padding:14px 16px 16px} /* ⚠️ Le sélecteur débordait de 94 px : les deux boutons demandaient 432 px dans une barre de 338, et le second était coupé net. Police et gouttières réduites pour qu'ils tiennent. */ .px-pq-echelles{max-width:360px;margin-inline:auto} /* ⚠️ Cette barre-ci est IMBRIQUÉE dans un conteneur plus étroit que la colonne : à 320 px son parent fait 265 et non 252. Le débord jusqu'aux bords de l'écran, calculé sur 68 px de marges, la faisait donc sortir de 13 px. Elle renonce au débord et défile dans son parent — mesuré, c'est le seul des deux jeux d'onglets du site à être dans ce cas. */ @media(max-width:480px){ .px-pq-echelles .px-onglets-barre{width:100%;margin-inline:0;padding-inline:4px} /* ⚠️ TROISIÈME instance du même piège, après le `fieldset` et la barre d'onglets : un élément de grille a un `min-width:auto` qui vaut sa taille min-content, laquelle peut dépasser la colonne. Mesuré à 320 px : la colonne du duo se calculait à 332,6 px dans un conteneur de 252. */ .px-pq-duo>*{min-width:0} } .px-pq-echelles .px-onglets-barre{padding:4px;gap:3px} .px-pq-echelles .px-onglets-barre button{padding:8px 12px;font-size:11.5px;letter-spacing:-.005em} /* ── 4 · LES CONVICTIONS ─────────────────────────────────────────────── */ /* Écartées franchement : chacune est un argument à part entière, elles ne doivent pas se lire comme une liste. */ .px-pq-conv{margin-top:152px;display:grid;grid-template-columns:minmax(0,1.05fr) 1fr;gap:64px; align-items:center} .px-pq-conv:first-of-type{margin-top:76px} .px-pq-conv.inverse .texte{order:2} .px-pq-conv .num{font-family:var(--f-titre);font-size:13px;font-weight:700;letter-spacing:.04em; color:var(--a);margin:0} .px-pq-conv h3{font-family:var(--f-accroche);font-size:clamp(21px,2.4vw,29px);font-weight:600; letter-spacing:-.02em;line-height:1.22;color:var(--px-ink);margin:14px 0 0;text-wrap:balance} .px-pq-conv .texte p{font-size:16.5px;line-height:1.74;color:var(--px-ink-2);margin:22px 0 0} /* Les appuis du raisonnement remontent d'un ton. Aucun mot n'a été ajouté : c'est de l'emphase typographique sur le texte validé. */ .px-pq-conv .texte b{color:var(--px-ink);font-weight:650} /* L'entrée en scène. Le bloc ne paraît plus d'un seul tenant : le numéro, le titre puis les paragraphes montent l'un après l'autre, et le visuel arrive par le côté vers lequel il est posé. */ @media(prefers-reduced-motion:no-preference){ .px-pq-conv .texte>*,.px-pq-conv .visuel{opacity:0} .px-pq-conv.px-in .texte>*{animation:px-monte .6s cubic-bezier(.16,.72,.22,1) both} .px-pq-conv.px-in .texte>*:nth-child(1){animation-delay:.02s} .px-pq-conv.px-in .texte>*:nth-child(2){animation-delay:.10s} .px-pq-conv.px-in .texte>*:nth-child(3){animation-delay:.18s} .px-pq-conv.px-in .texte>*:nth-child(4){animation-delay:.26s} .px-pq-conv.px-in .texte>*:nth-child(5){animation-delay:.34s} .px-pq-conv.px-in .visuel{animation:px-cote-droit .8s cubic-bezier(.16,.72,.22,1) .16s both} .px-pq-conv.inverse.px-in .visuel{animation-name:px-cote-gauche} } @keyframes px-monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes px-cote-droit{from{opacity:0;transform:translateX(34px) scale(.985)} to{opacity:1;transform:none}} @keyframes px-cote-gauche{from{opacity:0;transform:translateX(-34px) scale(.985)} to{opacity:1;transform:none}} .px-pq-conv .px-chute{border-left-color:var(--a)} .px-pq-conv .visuel .px-card{padding:24px 26px 26px} .px-pq-balance{display:flex;flex-direction:column;gap:18px} .px-pq-balance .plateau{padding:16px 18px;border-radius:var(--px-r-sm); background:rgba(255,255,255,.02);border:1px solid var(--px-rule)} .px-pq-balance .plateau.grand{border-color:color-mix(in srgb,var(--a) 42%,transparent); background:color-mix(in srgb,var(--a) 7%,transparent)} .px-pq-balance .etiq{display:block;margin-top:9px;font-size:13.5px;line-height:1.45; color:var(--px-ink-2)} .px-pq-balance .plateau.petit .etiq{color:var(--px-eteint)} .px-pq-balance .plateau.grand .etiq{color:var(--px-ink)} .px-pq-interets .ligne{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:14px 0;border-bottom:1px solid var(--px-rule)} .px-pq-interets .ligne:last-child{border-bottom:0} .px-pq-interets .qui{font-size:13.5px;font-weight:650;color:var(--px-ink-3)} .px-pq-interets .veut{font-size:13px;color:var(--px-eteint);text-align:right} .px-pq-interets .moi .qui{color:var(--a)} .px-pq-interets .moi .veut{color:var(--px-ink)} .px-pq-interets .moi{margin-top:6px;padding:15px 16px;border-radius:var(--px-r-sm); background:color-mix(in srgb,var(--a) 9%,transparent); border:1px solid color-mix(in srgb,var(--a) 40%,transparent)} .px-pq-memoire .rangs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0 0} .px-pq-memoire span{padding:13px 14px;border-radius:var(--px-r-sm);font-size:13px;font-weight:600} .px-pq-memoire .garde{color:var(--px-ink-2);background:rgba(255,255,255,.03); border:1px solid var(--px-rule)} .px-pq-memoire .perdu{color:var(--a);background:color-mix(in srgb,var(--a) 8%,transparent); border:1px dashed color-mix(in srgb,var(--a) 45%,transparent)} .px-pq-socle .efface,.px-pq-socle .reste{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0} .px-pq-socle span{padding:9px 13px;border-radius:99px;font-size:12.5px;font-weight:600} /* Barré et fané, mais lisible : --px-ink-4 tombait à 3,23 de contraste. */ .px-pq-socle .efface span{color:var(--px-eteint);background:rgba(255,255,255,.022); border:1px dashed var(--px-rule);text-decoration:line-through; text-decoration-color:var(--px-eteint)} .px-pq-socle .reste span{color:var(--px-ink);background:color-mix(in srgb,var(--a) 11%,transparent); border:1px solid color-mix(in srgb,var(--a) 44%,transparent)} .px-pq-socle .separation{height:1px;background:var(--px-rule);margin:22px 0} /* ── 5 · LE PARTI PRIS ───────────────────────────────────────────────── Cinq vignettes qui se retournent : le parti pris en grand sur la face avant, son explication au dos. Le survol suffit à l'ordinateur, mais la carte est un VRAI BOUTON — donc elle se retourne aussi au doigt et au clavier, ce qu'un simple `:hover` ne permettrait pas. La hauteur est fixe et commune : deux faces superposées n'ont pas de hauteur propre, et sans elle la grille s'effondrerait. */ .px-pq-partis{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px; perspective:1400px} .px-pq-partis>*:nth-child(4){grid-column:1/2} .px-pq-partis>*:nth-child(5){grid-column:2/4} /* Hauteur commune : deux faces superposées n'ont pas de hauteur propre, donc c'est le dos le plus long qui commande — 233 px de texte plus ses marges. */ .px-pq-parti{min-height:312px} /* ⚠️ Le retournement sautait. Deux causes : la carte se re-fabriquait à chaque image faute de `will-change`, et le survol luttait contre le clic — refermer une carte en la survolant ne faisait rien. Le survol est donc réservé aux appareils qui en ont un, et le clic reste seul maître ailleurs. Le mouvement est ralenti à 0,9 s sur une courbe sans dépassement. */ .px-pq-parti .carte{position:relative;display:block;width:100%;height:100%;min-height:inherit; padding:0;border:0;background:none;cursor:pointer;font:inherit;text-align:inherit; transform-style:preserve-3d;will-change:transform; transition:transform .9s cubic-bezier(.42,.04,.24,1)} @media (hover:hover){ .px-pq-parti .carte:hover{transform:rotateY(180deg)} } .px-pq-parti .carte[aria-expanded="true"]{transform:rotateY(180deg)} .px-pq-parti .carte:focus-visible{outline:2px solid var(--px-cy);outline-offset:5px; border-radius:var(--px-r)} .px-pq-parti .face{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;padding:30px 28px;border-radius:var(--px-r); -webkit-backface-visibility:hidden;backface-visibility:hidden; transform:translateZ(0)} /* ── LA COULEUR ENTRE PAR LE BORD ───────────────────────────────────── Le même geste que les blocs mis en avant de la page : une couleur qui vient d'un bord et s'éteint, jamais un fond coloré. Toute la page partage alors la même grammaire. */ .verre-c .px-pq-parti .avant{ background:linear-gradient(90deg, color-mix(in srgb,var(--a) 24%,transparent), color-mix(in srgb,var(--a) 7%,transparent) 44%, rgba(255,255,255,.022) 86%); border:1px solid rgba(255,255,255,.09); border-left:2px solid var(--a); backdrop-filter:blur(20px) saturate(1.32); -webkit-backdrop-filter:blur(20px) saturate(1.32); box-shadow:inset 1px 0 0 color-mix(in srgb,var(--a) 42%,transparent), inset 0 1px 0 rgba(255,255,255,.12), -14px 0 36px -26px color-mix(in srgb,var(--a) 85%,transparent), 0 20px 46px -28px rgba(0,0,0,.9)} .verre-c .px-pq-parti .avant::after{display:none} .verre-c .px-pq-parti .avant .titre{text-shadow:none} /* Le repère du dos suit la couleur qui entre : il passe à gauche, sous elle. */ .verre-c .px-pq-parti .avant::before{left:26px;margin-left:0} /* ── LA FACE VISIBLE : le verre (base commune) ───────────────────────── Un vrai verre, pas un aplat translucide : ce qui passe derrière est flouté et saturé, un liseré clair court en haut là où la lumière frappe, et un reflet oblique traverse la surface. Sans ces trois-là, c'est un rectangle semi-transparent. */ .px-pq-parti .avant{ background:linear-gradient(152deg, color-mix(in srgb,var(--a) 16%,rgba(255,255,255,.07)), rgba(255,255,255,.028) 58%, color-mix(in srgb,var(--a) 7%,rgba(255,255,255,.02))); border:1px solid color-mix(in srgb,var(--a) 44%,rgba(255,255,255,.16)); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05), 0 22px 48px -26px rgba(0,0,0,.85)} /* le reflet qui traverse */ .px-pq-parti .avant::after{content:'';position:absolute;inset:0;border-radius:inherit; pointer-events:none;background:linear-gradient(118deg, transparent 34%,rgba(255,255,255,.10) 47%,rgba(255,255,255,.02) 55%,transparent 68%)} .px-pq-parti .avant .titre{font-family:var(--f-accroche);font-size:20px;font-weight:600; letter-spacing:-.025em;line-height:1.28;color:var(--px-ink);text-align:center; text-wrap:balance;position:relative;z-index:1; text-shadow:0 1px 18px rgba(0,0,0,.5)} /* Un repère discret : la carte a un dos. */ .px-pq-parti .avant::before{content:'';position:absolute;bottom:16px;left:50%;margin-left:-13px; width:26px;height:2px;border-radius:2px;background:var(--a);opacity:.8;z-index:1; box-shadow:0 0 12px 1px color-mix(in srgb,var(--a) 65%,transparent)} /* ── LE DOS : plein, dans la couleur de la carte ─────────────────────── Le contour devient le fond. Le texte est plus grand et posé sur une surface qui lui appartient, au lieu de flotter sur le même gris que la face avant. */ .px-pq-parti .arriere{transform:rotateY(180deg) translateZ(0); background:linear-gradient(158deg, color-mix(in srgb,var(--a) 82%,#0B0F16), color-mix(in srgb,var(--a) 52%,#0B0F16) 62%, color-mix(in srgb,var(--a) 34%,#0B0F16)); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--a) 40%,white), 0 22px 48px -24px color-mix(in srgb,var(--a) 55%,transparent)} .px-pq-parti .arriere .texte{display:block;text-align:center} .px-pq-parti .arriere .texte p{margin:0 0 12px;font-size:15px;line-height:1.55;font-weight:500; color:rgba(255,255,255,.94);text-shadow:0 1px 14px rgba(0,0,0,.45)} .px-pq-parti .arriere .texte p:last-child{margin-bottom:0} .px-pq-parti .arriere .texte b{font-weight:750;color:#fff} /* Les deux dernières portent moins de texte : il peut respirer plus grand. */ .px-pq-partis>*:nth-child(4) .arriere .texte p, .px-pq-partis>*:nth-child(5) .arriere .texte p{font-size:19px;line-height:1.48;margin-bottom:16px} .px-pq-partis>*:nth-child(5) .arriere .texte{max-width:46ch;margin-inline:auto} /* Le texte se pose au centre de la carte, sur les deux axes. */ .px-pq-parti .arriere{align-items:center;justify-content:center;padding:30px 28px} @media(prefers-reduced-motion:reduce){ .px-pq-parti .carte{transition:none} } /* ── 6 · LE NOM ──────────────────────────────────────────────────────── */ /* Le visuel du prisme est retiré : un dessin faible affaiblit un texte fort. La section devient une colonne de lecture, comme le héros. */ .px-pq-nom-seul{max-width:680px;margin-inline:auto;text-align:center} .px-pq-nom-seul .px-lbl{justify-content:center} .px-pq-nom-seul .px-lbl::before{display:none} .px-pq-nom-seul .texte p{font-size:17px;line-height:1.72;color:var(--px-ink-2);margin:24px auto 0; max-width:54ch} .px-pq-nom-seul .texte p.px-chute{text-align:left;max-width:52ch} /* ── 7 · L'APPEL FINAL ──────────────────────────────────────────────── Le texte respirait sur six lignes dans un cadre deux fois trop large pour lui. On le laisse s'étendre, et les bulles de réassurance viennent au-dessus du bouton — c'est là qu'on hésite. */ #constat ~ * .px-final .amorce,.px-final .amorce{max-width:none} .px-final .gain{max-width:820px} /* ⚠️ `nowrap` faisait déborder les trois mentions des DEUX côtés sur téléphone — mesuré à 390 px : de −134 à 524 dans un conteneur de 276, sur la page Affiliation. Elles ne protégeaient rien : sur grand écran les trois tiennent sur une ligne de toute façon, donc `wrap` n'y change rien et sauve le mobile. */ .px-final .rassure{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px; margin:32px auto 0;padding:0} .px-final .rassure li{display:inline-flex;align-items:center;gap:7px;padding:8px 15px; white-space:nowrap; border-radius:99px;font-size:12.5px;font-weight:600;color:var(--px-ink-2); background:rgba(255,255,255,.035);border:1px solid var(--px-rule)} .px-final .rassure li::before{content:'';width:5px;height:5px;border-radius:50%;flex:none; background:var(--px-cy);box-shadow:0 0 9px 1px rgba(25,200,230,.75)} .px-pq-nom{padding-bottom:0} /* ── MOBILE ──────────────────────────────────────────────────────────── */ @media(max-width:900px){ .px-pq-hero{padding-top:38px} .px-pq-questions{grid-template-columns:1fr;gap:11px} .px-pq-questions li{min-height:0;padding:18px 20px} /* Le fil revient sur le bord : deux colonnes n'ont plus de sens ici. */ .px-pq-fil{--g:0px;grid-template-columns:1fr;row-gap:56px;padding-left:38px} .px-pq-fil::before,.px-pq-fil .trace,.px-pq-fil .tete{left:7px;margin-left:-1px} /* ⚠️ `-4.5px` ici décalait le bout brillant de 4,5 px À GAUCHE du fil — mesuré : axe de la trace et des nœuds à 7,0, axe du bout à 2,5, sur un rond de 7 px de large. La compensation supposait une largeur à `.tete`, qui n'en a aucune : son axe EST sa position. Corrigé le 2026-08-13 sur toute la plage où cette géométrie s'applique, pas seulement sur téléphone. */ .px-pq-fil .tete{margin-left:0} .px-pq-fil p:nth-of-type(n){grid-column:1;text-align:left} .px-pq-fil p:nth-of-type(1){grid-row:1} .px-pq-fil p:nth-of-type(2){grid-row:2} .px-pq-fil p:nth-of-type(3){grid-row:3} .px-pq-fil p:nth-of-type(odd)::before, .px-pq-fil p:nth-of-type(even)::before{left:-38px;right:auto;top:11px} .px-pq-duo{grid-template-columns:1fr;gap:34px} .px-pq-conv{grid-template-columns:1fr;gap:30px;margin-top:64px} .px-pq-conv.inverse .texte{order:0} .px-pq-partis{grid-template-columns:1fr} .px-pq-partis>*:nth-child(4),.px-pq-partis>*:nth-child(5){grid-column:auto} .px-pq-parti{min-height:290px} .px-pq-tuiles.six{grid-template-columns:repeat(2,1fr)} .px-pq-memoire .rangs{grid-template-columns:1fr} } /* ══════════════════════════════════════════════════════════════════════════ MOBILE — DEUXIÈME SALVE, retours de Thomas du 2026-08-13 ══════════════════════════════════════════════════════════════════════════ ⚠️ Tout ce bloc vit sous 620 px ou moins. Aucune de ces règles n'existe au-dessus du point de rupture : le grand écran est intouché par construction, et c'est vérifiable en mesurant à 1265 px avant/après. Mesuré à 375 px utiles, en iframe, `overflow-x` levé. */ @media(max-width:620px){ /* ── 1 · LA PASTILLE TENAIT SUR DEUX LIGNES ──────────────────────────── Mesuré : 49 px de haut à 375 px, contre 33 sur grand écran — donc deux lignes. La phrase demandait ~330 px pour une colonne qui en offre 307. Le corps ET le rembourrage descendent : à eux seuls, ni l'un ni l'autre ne suffisait. Mesuré taille par taille : 11,5 px laissait la pastille à 42 px de haut (deux lignes) ; à 11 px elle tombe à 28 px — une seule. La phrase demande alors 275 px pour les 283 que laisse la colonne à 375 px de large. ⚠️ La marge est de 8 px. Sous ~370 px, la phrase repassera sur deux lignes : à cette largeur, aucune taille lisible ne la fait tenir. Seul un texte plus court réglerait le cas — et celui-ci est de moi, il attend toujours ta validation. */ .px-tag.px-tag-phrase{font-size:11px;padding:7px 12px;letter-spacing:-.015em} /* ── 2 · LE TITRE NE CLAQUAIT PAS ────────────────────────────────────── 28 px mesurés à 375, contre 51,84 sur grand écran : le `clamp` en `vw` s'effondre sur une colonne étroite et retombe sur son plancher. ⚠️ HUITIÈME fois que la spécificité mord. `.px-hero h1` (0,2,1) ne suffit PAS : le héros de la landing porte les deux classes, et `.px-hero.px-hero-centre h1` (0,3,1) gagne. La règle mobile passait sans rien faire — mesuré, pas supposé. On reprend donc le sélecteur du thème TEL QUEL, au même poids, et c'est l'ordre qui tranche. */ .px-hero.px-hero-centre h1, .px-hero h1{font-size:34px;line-height:1.08;letter-spacing:-.055em} /* ── 3 · LE SOUS-TITRE ET « POUR LES DIRIGEANTS… » ───────────────────── Les deux paragraphes existent déjà séparément dans le balisage — il n'y avait donc rien à y changer. Le défaut était ailleurs : MÊME corps (17,5 px tous les deux) et marge haute NULLE entre eux. Ils se lisaient comme un seul pavé. On sépare par l'air et par la taille. ⚠️ Mêmes sélecteurs que le thème, pour la même raison qu'au-dessus : `.px-hero.px-hero-centre p.sous:not(.sous-2)` pèse (0,4,1) et `.px-hero.px-hero-centre .tiers` (0,3,0). */ .px-hero.px-hero-centre p.sous:not(.sous-2), .px-hero .sous{font-size:15px;line-height:1.55} .px-hero.px-hero-centre .tiers, .px-hero .tiers{font-size:13.5px;margin-top:18px;color:var(--px-ink-3)} /* ── 4 · LA QUESTION QUI S'ÉCRIT SORTAIT DE LA BARRE ─────────────────── `white-space:nowrap` + `overflow:hidden` sur une boîte de 237 px, alors que les quatre questions mesurent 276, 311, 402 et 324 px : elles étaient coupées net, de 39 à 165 px. Aucune taille lisible ne les fait tenir sur une ligne — il faudrait descendre à 9,4 px. Elles passent donc sur deux lignes, et la hauteur est RÉSERVÉE : sans `min-height`, la frappe ferait sauter toute la barre à chaque passage à la ligne, puis en sens inverse à l'effacement. */ .px-barre .dit{white-space:normal;font-size:14px;line-height:1.35;min-height:38px} /* ── 5 · « LE PROBLÈME » : UNE VIGNETTE APRÈS L'AUTRE ────────────────── ⭐ La cause n'est pas un oubli : `@media(max-width:1080px)` pose `.px-constat{opacity:1;min-height:auto}` et neutralise la lecture suivie dès la tablette. La décision d'origine est juste — à une colonne, estomper à 0,28 le texte qu'on est en train de lire le rendrait illisible. Mais le résultat, c'est que les cinq constats sont posés en clair, à la suite, et qu'il ne se passe plus rien. ⚠️ CE TRAITEMENT NE VAUT QUE POUR CETTE SECTION. Le reste de la page garde exactement le réglage d'origine : aucune règle globale sur `.px-rv` ici, et l'observateur du thème n'est pas touché. Les constats ont leur PROPRE observateur dans `prism.js`, avec son propre déclenchement. Chaque vignette s'anime à SON entrée — il n'y a donc pas de décalage `--i` à poser : elles se suivent naturellement, une par une. ⚠️ La règle 1080 pèse (0,1,0) et arrive après `.px-rv` : il faut donc (0,2,1) ici pour reprendre la main. */ #probleme .px-constat.px-rv{opacity:0;transform:translateY(30px); transition:opacity .6s ease,transform .6s cubic-bezier(.16,.72,.22,1)} #probleme .px-constat.px-rv.px-in{opacity:1;transform:none} /* ── 6 · LE SÉLECTEUR DE « COMPRENDRE » : L'ACTIF AU CENTRE ──────────── Quatre onglets pour 456 px dans une piste de 375 : « Explorer » restait collé à gauche et les deux derniers étaient hors champ. Le rembourrage latéral vaut la moitié de la piste moins la demi-largeur d'un onglet : sans lui, le PREMIER et le DERNIER ne peuvent pas atteindre le centre — il n'y a rien pour les y pousser. C'est ce qui permet à « Explorer » d'être centré dès l'arrivée. ⚠️ Écrase le `padding-inline:34px` posé à 480 px, qui cale la barre sur les bords de l'écran. Les deux règles s'appliquent à 375 px et c'est l'ordre qui tranche : ce bloc est le dernier du fichier. ⚠️⚠️ UN POURCENTAGE DE REMBOURRAGE SE CALCULE SUR LA LARGEUR DU PARENT, pas sur celle de l'élément. La barre saigne à 375 px mais son parent fait 307 : `calc(50% - 62px)` donnait 91,5 px là où il en faut 137, et « Explorer » restait à 79 px du centre — le défilement était borné avant d'y arriver. Le parent mesurant 307 et la barre 68 de plus, la demi-barre vaut `50% + 34px` ; il faut y retrancher la demi-largeur du PLUS ÉTROIT des onglets (101 px), soit ~50. D'où `50% - 16px` = 137,5 px. ⚠️ CONDITIONNÉ PAR UNE CLASSE, pas par la largeur seule. Mesuré à 605 px — un téléphone en paysage — les quatre onglets tiennent sans défiler : le rembourrage de centrage y valait 252 px et fabriquait un débordement là où il n'y en avait pas, avec du vide de part et d'autre. Le script ne pose `px-onglets-piste` QUE si la barre déborde vraiment. */ .px-onglets-barre.px-onglets-piste{scroll-snap-type:x mandatory; scroll-behavior:smooth;padding-inline:calc(50% - 16px)} .px-onglets-barre.px-onglets-piste button{scroll-snap-align:center} /* ── 7 · « POUR QUI » : UNE VIGNETTE PAR TEXTE ───────────────────────── La grille à une colonne alignait six phrases à coches sur toute la hauteur de l'écran. Elle devient une piste à défilement, avec les réglages de `.px-trouv-piste` — le carrousel qui existe déjà — plutôt qu'un second carrousel dessiné à côté. ⚠️ Les six éléments portent `.px-rv`. Hors champ à droite, ils ne sont jamais vus par l'observateur et resteraient VIDES jusqu'au premier balayage. On les allume donc d'emblée, comme le fait déjà `.px-pq-fil .etape.px-rv` pour la même raison. */ .px-pour{margin-top:34px;display:flex;gap:14px; overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; margin-inline:-34px;padding:2px 34px 8px; scrollbar-width:none;-ms-overflow-style:none} .px-pour::-webkit-scrollbar{display:none} .px-pour li{flex:0 0 82%;scroll-snap-align:center; padding:22px 20px;border-radius:var(--px-r-sm); background:rgba(255,255,255,.03);border:1px solid var(--px-rule); /* Le contenu était collé en haut : la coche et sa phrase se suivaient en ligne, alignées sur le premier mot. En colonne et centré sur les deux axes, chaque vignette se lit d'un bloc. Les vignettes ont déjà la même hauteur — une piste flex étire ses enfants — donc le centrage vertical a de quoi s'exercer. */ flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:12px} .px-pour li.px-rv{opacity:1;transform:none;transition:none} /* ── 8 · « L'EFFET PRODUIT » : UNE VIGNETTE CENTRÉE, SES VOISINES EN VUE ─ Trois défauts tenaient ensemble, et il fallait les reprendre ensemble. ⭐ LA PISTE SAIGNE JUSQU'AUX BORDS DE L'ÉCRAN et la carte garde la largeur de la colonne de texte (307 px). Le rembourrage latéral vaut exactement la moitié de ce qui reste : la première carte se trouve donc centrée SANS avoir à défiler, et `scroll-snap-align:center` amène les suivantes au même endroit. Avant, elles se calaient à gauche (`start`). ⭐ L'ÉCART TOMBE DE 26 À 12 PX : c'est lui qui décide de ce qu'on aperçoit des voisines. À 34 px de rembourrage moins 12 d'écart, il reste 22 px de la carte d'à côté de chaque côté — assez pour lire un carrousel, pas assez pour distraire de celle qu'on regarde. ⭐ LE VOILE N'A PLUS QU'À ADOUCIR LA COUPE au bord de l'écran, puisque l'écart est couvert par le rembourrage : 14 px suffisent, contre 104 sur grand écran — où ils ne valent que 9 % d'une piste de 1172 px, alors qu'ici ils en faisaient 34 %. ⚠️ `flex-basis` en pourcentage se mesure sur la CONTENT-BOX du conteneur, donc sur 375 − 68 = 307 px, pas sur les 375. `calc(100% - 68px)` ôtait le rembourrage une seconde fois et donnait 239 px. `100%` vaut exactement la largeur de la colonne de texte, ce qu'on cherchait. */ .px-trouv-piste{margin-inline:-34px;padding-left:34px;padding-right:34px; gap:12px;scroll-padding-inline:34px} .px-trouv-piste li:nth-child(n){flex-basis:100%;scroll-snap-align:center} .px-trouv-piste.px-voile-g{--voile-g:14px} .px-trouv-piste.px-voile-d{--voile-d:14px} /* La chute était collée à gauche, à côté de ses deux boutons. */ .px-pour-chute{flex-direction:column;align-items:center;text-align:center;gap:18px} .px-pour-chute .deux{justify-content:center} } @media(max-width:480px){ /* ── 5 · LE CARROUSEL « L'EFFET PRODUIT » ────────────────────────────── ⚠️ SEPTIÈME fois que la spécificité mord, et la plus sournoise : le `flex-basis:90%` était DÉJÀ posé dans la requête média voisine, mais `.px-trouv-piste li:nth-child(1)` pèse (0,2,1) contre (0,1,1). La règle mobile passait sans rien faire. Mesuré : première carte à 412 px dans une piste de 307 — on n'en voyait jamais une entière. `nth-child(n)` vise tous les enfants AU MÊME POIDS que `nth-child(1)`, et gagne parce qu'elle est déclarée après. ⚠️ RETIRÉE le 2026-08-13 : la piste est entièrement reprise dans le bloc « L'EFFET PRODUIT » de la requête à 620 px, qui couvre aussi ces largeurs. Déclarée APRÈS lui, cette règle-ci l'écrasait et ramenait la carte à 264 px au lieu de 307 — mesuré. */ } /* ══════════════════════════════════════════════════════════════════════════ « POURQUOI PRISM » — MOBILE, retours de Thomas du 2026-08-13 ══════════════════════════════════════════════════════════════════════════ Tout ce bloc vit sous 620 px. Il vient après la requête à 900 px qui règle déjà la géométrie du fil, et la complète. */ @media(max-width:620px){ /* ── 1 · LE SOUS-TITRE, AU CORPS DE LA PAGE D'ACCUEIL ────────────────── Même traitement que le héros de la Home, validé hier. */ .px-pq-hero .amorce{font-size:15px;line-height:1.55} /* Le bloc bleu du héros : ses trois lignes sont centrées. Le filet coloré reste à gauche — c'est lui qui porte la couleur, pas le texte. */ .px-pq-suite{text-align:center} /* ── 2 · PLUS D'AIR ENTRE LES TROIS TEMPS ────────────────────────────── ⚠️⚠️ CE RÉGLAGE DÉPLACE LES NŒUDS, donc les bornes d'allumage qui suivent ont été REMESURÉES après lui, jamais devinées — c'est l'avertissement que porte déjà la version grand écran. */ .px-pq-fil{row-gap:124px} /* ── 4 · LES NŒUDS S'ALLUMAIENT APRÈS LE PASSAGE DU BOUT ─────────────── ⭐ Le mot du code grand écran était : « ces bornes dépendent de la géométrie, toute retouche de `padding-top` ou de `row-gap` les décale. À REMESURER, pas à deviner. » Or la requête à 900 px change justement tout : une colonne au lieu de deux, `row-gap` de 172 à 56 px, et la hauteur du fil avec. Les bornes du grand écran sont restées en place — d'où des ronds qui s'allumaient bien après le passage du bout. REMESURÉ ici, après le nouvel espacement, avec la formule d'origine (borne = 15 + fraction × 70, la plage de tracé allant de 15 % à 85 %) : les centres des nœuds tombent à 168, 551 et 999 px d'un fil de 1208, soit les fractions 0,139 / 0,456 / 0,827 → 24,7 / 46,9 / 72,9 %. Le grand écran, lui, est à 30,9 / 55,5 / 80,2 et n'est pas touché. ⚠️ Ces valeurs ont déjà été refaites une fois, quand `row-gap` est passé de 88 à 124 px : la troisième borne a bougé de 72,1 à 72,9. C'est exactement le piège annoncé — toute retouche de l'espacement les décale. ⚠️ À REMESURER si l'on retouche `row-gap`, `padding-top` ou le corps du texte de cette page. */ @supports (animation-timeline: view()){ @media(prefers-reduced-motion:no-preference){ /* ⚠️⚠️ RESTREINTES À `#constat`. Le fil est réemployé tel quel sur « Affiliation » (`#comment`), avec des textes plus courts : sa hauteur n'est pas la même, donc ses nœuds ne tombent pas aux mêmes fractions. Non restreintes, ces bornes-ci s'y appliquaient et le fil y était complètement décalé. Les bornes d'`#comment` sont plus bas, mesurées sur SA géométrie. */ #constat .px-pq-fil p:nth-of-type(1)::before{animation-range:cover 23% cover 27%} #constat .px-pq-fil p:nth-of-type(2)::before{animation-range:cover 45% cover 49%} #constat .px-pq-fil p:nth-of-type(3)::before{animation-range:cover 71% cover 75%} /* Le fil d'« Affiliation », mesuré sur SA géométrie : ses textes sont plus courts, son fil fait 852 px là où celui du constat en fait 1208. Centres des nœuds à 168, 454 et 740 → fractions 0,197 / 0,533 / 0,869 → bornes 28,8 / 52,3 / 75,8 %. */ #comment .px-pq-fil p:nth-of-type(1)::before{animation-range:cover 27% cover 31%} #comment .px-pq-fil p:nth-of-type(2)::before{animation-range:cover 50% cover 54%} #comment .px-pq-fil p:nth-of-type(3)::before{animation-range:cover 74% cover 78%} /* ── 5 · LE BOUT SACCADAIT, LA TRACE NON ────────────────────────── Les deux lisent pourtant la MÊME frise. La différence est la propriété animée : la trace fait varier un `transform`, que le navigateur compose sans retoucher la mise en page ; le bout faisait varier `top`, qui la recalcule à chaque image. D'où un fil fluide et un bout qui sautille. On lui donne la même course en `translateY`. `will-change` prévient le navigateur pour qu'il prépare la couche à l'avance. ⚠️ Mobile seulement : sur grand écran le comportement d'origine est conservé tel quel, faute d'avoir pu y constater le défaut. */ .px-pq-fil .tete{animation-name:px-tete-glisse,px-teinte-bout; will-change:transform} } } /* ── 5 · LE SÉLECTEUR D'« INSIGHT » DÉBORDAIT DE SA COLONNE ──────────── Mesuré : deux onglets de 147 et 175 px, soit 322 avec leur rembourrage, pour une colonne qui en offre 307. La barre se calait donc à 333 px et mordait de 26 px au-delà du texte — d'où des bords qui semblent coupés. Les deux libellés sont longs — « 1 000 références · 6 canaux » — et on ne peut pas les raccourcir sans toucher au texte. ⚠️⚠️ TROISIÈME PASSE, et les deux premières visaient à côté. Ce ne sont pas les libellés qui étaient coupés : c'est LA LUEUR DU BOUTON ACTIF. Il porte une `box-shadow` de 32 px de flou, et la barre est en `overflow-x:auto` — or dès que l'un des deux axes n'est plus `visible`, le navigateur rogne AUSSI l'autre. La lueur était donc tranchée net sur les quatre bords. C'est le même piège que l'ombre des cartes du carrousel, déjà consigné dans le README. Réduire le corps (passe 1) ou empiler les onglets (passe 2) ne pouvaient rien y faire, puisque le défaut n'était pas là. Trois gestes, donc : `overflow:visible` pour que la lueur respire ; la barre déborde de son conteneur pour que les deux libellés tiennent SANS toucher à leur corps ; et le rembourrage se resserre, lui seul. ⚠️ La largeur du débordement est MESURÉE, pas choisie : le conteneur `.px-pq-echelles` ne fait que 261 px — pas 307 — et le libellé long demande 151 px de texte, soit 159 avec son rembourrage. Il faut donc 2×159 + 3 d'écart + 8 de rembourrage = 329 px de barre. À −20 px on n'obtenait que 301 et le texte débordait de 14 px de son propre fond ; à −42 px la barre fait 345 et il reste 8 px de marge. ⚠️⚠️ ET VOICI LES « BORDS CASSÉS », qui n'étaient toujours pas là où je regardais : `border-radius:0` et `border-left/right:0`. Ces trois déclarations viennent de la requête à 480 px écrite pour LA BARRE DE LA HOME, celle qui saigne jusqu'aux bords de l'écran — sans coins ni bords latéraux, puisqu'elle n'en a pas besoin. Mais elle vise `.px-onglets-barre` sans distinction, donc celle-ci en héritait aussi. Or celle-ci ne saigne pas : elle garde 24 px de marge de chaque côté, et ses extrémités s'arrêtaient donc net en plein milieu de l'écran. On lui rend ses coins et ses deux bords. */ .px-pq-echelles .px-onglets-barre{flex-direction:row;overflow:visible; width:calc(100% + 84px);max-width:none;min-width:0; margin-inline:-42px;gap:3px;padding:4px; border-radius:var(--px-r-sm); border-left:1px solid var(--px-rule);border-right:1px solid var(--px-rule)} .px-pq-echelles .px-onglets-barre button{flex:1 1 0;min-width:0;width:auto; padding:9px 4px;font-size:11.5px;white-space:nowrap;text-align:center} /* ── 6 · « À VOUS DE JUGER » : LE CHAPÔ AU CORPS DU HÉROS ────────────── 20 px comme l'amorce du héros avant correction, et pour la même raison : sur une colonne unique, ce corps prend toute la place sans rien ajouter. ⚠️ `.px-final` sert aussi sur les autres pages : ce corps s'y appliquera de la même façon en mobile, ce qui est cohérent — mais il faut le savoir. */ .px-final .amorce{font-size:15px;line-height:1.55} /* ── 7 · LE PARTI PRIS : LES DEUX DERNIÈRES VIGNETTES ────────────────── Elles portent 19 px là où les trois autres sont à 15 — un choix du grand écran, où elles occupent deux colonnes et portent moins de texte. Sur une colonne unique, ce corps devient massif. On les ramène au corps commun. */ .px-pq-partis>*:nth-child(4) .arriere .texte p, .px-pq-partis>*:nth-child(5) .arriere .texte p{font-size:15px;line-height:1.55; margin-bottom:12px} } /* ══════════════════════════════════════════════════════════════════════════ « NOS OFFRES » — MOBILE, retours de Thomas du 2026-08-13 ══════════════════════════════════════════════════════════════════════════ */ /* ⭐ LES LUCIOLES SORTAIENT DE L'ÉCRAN, et c'est ce qui laissait glisser la page de gauche à droite. ⚠️ Rien ne le montrait au repos : leur écartement est ANIMÉ, et les animations ne tournent pas dans l'outil de mesure. Il a fallu calculer leur position d'arrivée — 13 des 28 sortaient, jusqu'à 47 px à gauche et 36 à droite. ⚠️ Et `body{overflow-x:hidden}` ne les retenait pas : la règle est posée sur `body` sans l'être sur `html`, et dans ce cas iOS propage le débordement à la racine. L'ajouter sur `html` bloquerait le glissement, mais casserait aussi tous les `position:sticky` de la page — dont le visuel du constat. On traite donc la cause, pas le symptôme. La course VERTICALE est conservée telle quelle : c'est elle qui fait l'effet. Seul l'écartement latéral tombe à zéro, là où il n'y a pas la place de l'accueillir. */ @keyframes px-luciole-droite{ 0% {opacity:0; transform:translate3d(0,0,0) scale(.5)} 12% {opacity:.9} 55% {opacity:.6; transform:translate3d(0,calc(var(--v) * -.55),0) scale(1)} 84% {opacity:.28} 100%{opacity:0; transform:translate3d(0,calc(var(--v) * -1),0) scale(.45)}} @media(max-width:620px){ .px-etincelles b{animation-name:px-luciole-droite} /* ── LE HÉROS, AUX CORPS DES AUTRES PAGES ────────────────────────────── Mêmes valeurs que la Home et « Pourquoi Prism », déjà validées. */ .px-hero.px-hero-centre.px-offres-tete h1{font-size:34px;line-height:1.08; letter-spacing:-.055em} .px-hero.px-hero-centre.px-offres-tete p.sous:not(.sous-2){font-size:15px;line-height:1.55} /* ⛔ LE BLOG SUIT LES MÊMES CORPS — et cette règle est OBLIGATOIRE, pas un réglage fin. `.px-hero.px-hero-centre.px-bl-hero h1` pèse (0,3,1) et bat donc la règle mobile générique du thème (0,2,1) : sans ce rattrapage, le `clamp` du blog descendait à 28 px sur téléphone quand toutes les autres pages sont à 34. Ne pas séparer les deux règles. */ .px-hero.px-hero-centre.px-bl-hero h1{font-size:34px;line-height:1.08; letter-spacing:-.055em} .px-hero.px-hero-centre.px-bl-hero p.sous:not(.sous-2){font-size:15px;line-height:1.55} /* ── LES OFFRES EN CARROUSEL ─────────────────────────────────────────── Même piste que « L'effet produit » de la Home, validée hier : la piste saigne jusqu'aux bords, la carte garde la largeur de la colonne de texte, le rembourrage latéral vaut la moitié de ce qui reste — donc la première carte est centrée sans défiler — et `scroll-snap-align:center` amène les suivantes au même endroit. L'écart de 12 px laisse voir un bout des voisines. ⚠️ Le rembourrage vertical n'est pas décoratif : dès qu'`overflow-x` n'est plus `visible`, le navigateur rogne AUSSI l'axe vertical, et les ombres portées des cartes seraient tranchées. ⚠️ PAS de `scroll-padding-inline` : il sert à décaler le point d'ancrage quand les éléments se calent en `start`. Avec un calage CENTRÉ il entre en concurrence avec le rembourrage et le repos devient flottant. ⚠️⚠️ ET SURTOUT `.px-rv`. Les trois cartes le portent. Hors champ à droite, elles ne sont jamais vues par l'observateur : elles restaient donc invisibles ET décalées de 30 px vers le bas — mesuré, un `translateY(30px)` sur Freemium et Starter. Comme `overflow-x:auto` force aussi l'axe vertical à `auto`, ce décalage ajoutait un défilement vertical dans la piste et donnait des cartes coupées. On les allume d'emblée, comme pour « Pour qui » et pour la même raison. */ .px-grille-tarifs{display:flex;max-width:none;gap:12px; margin-inline:-34px;padding:14px 34px 44px; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:none;-ms-overflow-style:none} .px-grille-tarifs::-webkit-scrollbar{display:none} .px-grille-tarifs>*{flex:0 0 100%;scroll-snap-align:center} .px-grille-tarifs>.px-rv{opacity:1;transform:none;transition:none} /* ── « VOIR AVANT DE CHOISIR » : LA PHRASE SOUS LE TITRE ──────────────── Au corps du sous-titre du héros, comme le chapô de « À vous de juger » hier. ⚠️ `.px-final` sert sur toutes les pages : cette phrase y prendra le même corps en mobile. */ .px-final .gain{font-size:15px;line-height:1.55} } /* ══════════════════════════════════════════════════════════════════════════ « AFFILIATION » — MOBILE, retours de Thomas du 2026-08-13 ══════════════════════════════════════════════════════════════════════════ */ @media(max-width:620px){ /* ── LE HÉROS, AUX CORPS DES AUTRES PAGES ────────────────────────────── Mêmes valeurs que la Home, « Pourquoi Prism » et « Nos offres ». ⚠️ Sélecteurs au poids de ceux du thème : `.px-hero.px-hero-centre .px-affil-tete h1` pèse (0,3,1), une classe seule ne passerait pas. */ .px-hero.px-hero-centre.px-affil-tete h1{font-size:34px;line-height:1.08; letter-spacing:-.055em} .px-hero.px-hero-centre.px-affil-tete p.sous:not(.sous-2){font-size:15px;line-height:1.55} /* ── LE SIMULATEUR : LES DEUX MONTANTS CÔTE À CÔTE ───────────────────── La grille est DÉJÀ en deux colonnes — c'est le `width:100%` du libellé qui, en poussant le montant à la ligne, faisait paraître chaque colonne empilée. Sur 375 px, « 3 236,40 € » à 20 px demande plus que la demi-colonne : le second montant descend d'un cran. Les libellés restent au-dessus de leur montant (ils sont plus larges que lui), mais les deux blocs tiennent côte à côte, et le second montant est réduit — c'est déjà un ordre de grandeur, pas le résultat. */ .px-simu .resultats{grid-template-columns:1fr 1fr;gap:12px} .px-simu .resultats span{font-size:10.5px;margin-bottom:4px} .px-simu .resultats output{font-size:21px} .px-simu .resultats p+p output{font-size:16px} .px-simu .resultats i{font-size:11px} /* Les deux montants côte à côte forment un bloc compact : 14 px ne suffisaient plus à l'en détacher, la note du calcul semblait leur être accrochée. */ .px-simu .base{margin-top:26px} } /* ══════════════════════════════════════════════════════════════════════════ « CONTACT » — MOBILE, passe du 2026-08-13 ══════════════════════════════════════════════════════════════════════════ */ /* ⭐ LE CONTENU TOUCHAIT LES BORDS DE L'ÉCRAN, à 0 px. `.px-wrap` et `.px-ccols` sont posés sur LE MÊME élément, pèsent tous deux (0,1,0), et `.px-ccols` est déclaré après : son `padding:52px 0 0` écrasait donc le `padding:0 34px` du wrap. Mesuré à 375 px : titre, texte et formulaire tous à 0 px du bord, quand toutes les autres pages du site gardent 34 px. ⚠️ Le défaut vaut à TOUTES les tailles — sur grand écran, le wrap est plafonné à 1240 px et centré, ce qui le masque presque. Il n'est corrigé ici que là où il se voit, pour ne rien déplacer sur desktop sans que ce soit demandé. */ @media(max-width:1080px){ .px-ccols{padding-left:34px;padding-right:34px} } /* Le second temps de l'accroche passe au blanc du texte principal, le premier restant en gris : c'est celui-là qui dit ce qu'on fait ensemble. Sans gras — `.px-ctexte strong` en met déjà, et ce n'est pas ce qui est demandé ici. Hors requête média : voulu sur les deux tailles. */ .px-ctexte .px-clair{color:var(--px-ink)} /* ⭐ LE MOT MIS EN LUMIÈRE, comme dans les quatre autres héros du site. C'est LE MÊME dégradé que `.px-hero h1 em`, repris tel quel : le titre de cette page ne vit pas dans un `.px-hero`, il lui faut donc son propre sélecteur, mais pas son propre effet. Hors requête média : demandé sur les deux tailles. */ .px-cgauche .wp-block-post-title em{font-style:normal; background:linear-gradient(96deg,#8FE9F8,#6E6BFF); -webkit-background-clip:text;background-clip:text;color:transparent} @media(max-width:1080px){ /* ⭐ TITRE ET ACCROCHE CENTRÉS, comme les héros des autres pages — mais SEULEMENT à partir du moment où la page passe sur une colonne. Au-dessus, le titre partage sa ligne avec le formulaire : le centrer dans sa demi- largeur le décollerait du texte qu'il annonce. Les trois temps numérotés restent alignés à gauche : ils sont tenus par un fil vertical, qui n'aurait plus de sens centré. */ .px-cgauche .wp-block-post-title{text-align:center} .px-ctexte>p:first-child{text-align:center} } @media(max-width:620px){ /* Le titre et le texte aux corps des quatre autres pages : le `clamp` en `vw` s'effondrait sur son plancher, 27 px au lieu des 34 posés partout ailleurs, et le texte restait à 16,5. */ .px-cgauche .wp-block-post-title{font-size:34px;line-height:1.08; letter-spacing:-.05em} .px-ctexte{font-size:15px;line-height:1.62} /* Le formulaire respire un peu plus : une fois les marges d'écran rendues, sa colonne perd 68 px et ses champs se resserrent. */ .px-form{padding:22px 18px} .px-form .px-champ{margin-bottom:15px} } /* ══ « CANDIDATURE » — MOBILE, passe du 2026-08-13 ═════════════════════════ */ @media(max-width:620px){ /* Titre et sous-titre aux corps des cinq autres pages. Le `clamp` en `vw` s'effondre sur son plancher dès qu'on descend sous ~800 px de large. ⚠️ Sélecteurs au poids de ceux du thème : `.px-hero.px-hero-centre .px-candi-tete h1` pèse (0,3,1). */ .px-hero.px-hero-centre.px-candi-tete h1{font-size:34px;line-height:1.08; letter-spacing:-.055em} .px-hero.px-hero-centre.px-candi-tete p.sous:not(.sous-2){font-size:15px;line-height:1.55} } /* ══════════════════════════════════════════════════════════════════════════ PAGE « DÉMARRER » — /demarrer/ ══════════════════════════════════════════════════════════════════════════ Destination des boutons des cartes d'offres. Elle ne dessine RIEN de neuf : le héros, le fil des étapes, la liste à coches, la phrase mise en avant et les chapôs de section viennent tous du thème. Ce bloc ne fait que les caler — largeurs et marges. ⚠️ Les identifiants de ses sections sont PRÉFIXÉS `dem-`. `#comment`, `#acces` et `#delais` étaient déjà pris ailleurs, et `#comment` porte dix règles propres à « Affiliation » — dont ses bornes d'allumage, mesurées sur SA géométrie. Sans préfixe, cette page en aurait hérité : c'est le défaut qu'on vient de réparer là-bas. */ .px-hero.px-dem-tete{max-width:1080px;padding-bottom:0} .px-hero.px-hero-centre.px-dem-tete h1{white-space:normal;text-wrap:balance; font-size:clamp(28px,4.05vw,58px)} /* ⚠️ 15 px et non 16,5 : réduit le 2026-08-14 sur retour de Thomas — « plus petit le texte ». Et `max-width:62ch` plutôt que 70 : dans une colonne de 616 px la mesure ne mordait pas, mais elle sert au-dessus de 1440 où la colonne s'élargit. ⚠️ Le sélecteur garde ses cinq classes : la règle de base `.px-hero.px-hero-centre p.sous:not(.sous-2)` pèse (0,4,1) et impose 17,5 px à toutes les têtes centrées. Alléger d'un cran ici la ferait perdre. */ .px-hero.px-hero-centre.px-dem-tete p.sous:not(.sous-2){white-space:normal;max-width:62ch; font-size:15px;line-height:1.62;margin-top:26px} /* La chute du chapô au blanc du texte principal, comme sur « Nos offres ». */ .px-hero.px-hero-centre.px-dem-tete p.sous b{color:var(--px-ink);font-weight:700} /* La phrase qui lève l'objection : c'est `.px-chute` du thème, seulement recentrée et élargie pour cette page. */ .px-dem-rassure{margin:36px auto 0;max-width:70ch} /* La liste à coches, resserrée : ses items portent ici deux niveaux — un intitulé en gras, puis son explication. */ .px-dem-acces{margin-top:34px} .px-dem-acces b{color:var(--px-ink);font-weight:650} /* Les chapôs de section sont centrés comme leurs titres. */ #dem-acces .px-sec-chapo, #dem-delais .px-sec-chapo{margin-inline:auto;text-align:center;max-width:70ch} /* ── LA QUATRIÈME ÉTAPE DU FIL ──────────────────────────────────────────── ⚠️ Le fil n'en a jamais porté que trois. Trois choses manquaient donc, et aucune ne se serait signalée : la colonne et la ligne de la quatrième dans la grille, sa position de nœud, et sa BORNE d'allumage — sans quoi son rond ne se serait jamais allumé, sans erreur ni trace. La borne est MESURÉE sur cette page, comme partout ailleurs. */ .px-pq-fil p:nth-of-type(4){grid-column:2;grid-row:4} @media(max-width:900px){ #dem-etapes .px-pq-fil p:nth-of-type(4){grid-column:1;grid-row:4;text-align:left} } /* ── LES BORNES DES QUATRE NŒUDS, MESURÉES SUR CETTE PAGE ───────────────── Le fil du thème n'en définit que trois : sans ces règles, le quatrième rond ne se serait jamais allumé — sans erreur, sans trace, sans rien qui le signale. Et les trois premières auraient gardé les bornes d'une autre géométrie. Formule d'origine : borne = 15 + fraction × 70, la plage de tracé allant de 15 % à 85 %. Mesures prises après coup, jamais devinées. ⚠️ À REMESURER si le texte des étapes change, ou l'espacement du fil. */ @supports (animation-timeline: view()) { @media(prefers-reduced-motion:no-preference){ /* Grand écran — fil de 1022 px, nœuds à 182 / 452 / 721 / 974. */ #dem-etapes .px-pq-fil p:nth-of-type(1)::before{animation-range:cover 25% cover 29%} #dem-etapes .px-pq-fil p:nth-of-type(2)::before{animation-range:cover 44% cover 48%} #dem-etapes .px-pq-fil p:nth-of-type(3)::before{animation-range:cover 62% cover 66%} #dem-etapes .px-pq-fil p:nth-of-type(4)::before{animation:px-noeud linear both; animation-timeline:--fil;animation-range:cover 80% cover 84%} @media(max-width:620px){ /* Téléphone — fil de 1105 px, nœuds à 168 / 389 / 740 / 961. */ #dem-etapes .px-pq-fil p:nth-of-type(1)::before{animation-range:cover 24% cover 28%} #dem-etapes .px-pq-fil p:nth-of-type(2)::before{animation-range:cover 38% cover 42%} #dem-etapes .px-pq-fil p:nth-of-type(3)::before{animation-range:cover 60% cover 64%} #dem-etapes .px-pq-fil p:nth-of-type(4)::before{animation-range:cover 74% cover 78%} } } } @media(max-width:620px){ /* Titre et chapô aux corps des cinq autres pages : le `clamp` en `vw` s'effondre sur son plancher, 28 px mesurés. */ .px-hero.px-hero-centre.px-dem-tete h1{font-size:34px;line-height:1.08; letter-spacing:-.055em} .px-hero.px-hero-centre.px-dem-tete p.sous:not(.sous-2){font-size:15px;line-height:1.55} .px-dem-rassure{margin-top:28px} #dem-acces .px-sec-chapo,#dem-delais .px-sec-chapo{font-size:15px;line-height:1.62} } /* ── LES CASES À COCHER — page « Démarrer » ─────────────────────────────── Le site n'en avait aucune : c'est le seul composant de formulaire qu'il fallait dessiner. Il reprend la surface et le liseré des champs existants, et le cyan de l'état actif — rien d'autre n'est inventé. ⚠️ `min-width:0` sur le `fieldset` n'est pas décoratif : un `fieldset` a une largeur minimale intrinsèque qui vaut son contenu, déclarée ou non. C'est le piège déjà payé sur la barre d'onglets et sur `.px-pq-duo`. */ /* ⭐ CE BLOC A RESSERVI, et c'est pour ça qu'il n'avait pas été supprimé. Les cases avaient laissé la place à des menus le matin du 2026-08-14 ; l'après- midi Thomas a précisé qu'il voulait « cocher des réponses », donc plusieurs. Elles reviennent, à l'identique, mais DANS un panneau dépliant — voir `.px-dem-choix` plus bas. Une seule chose change : le conteneur. */ .px-dem-outils{border:0;padding:0;margin:0 0 18px;min-width:0} .px-dem-outils legend{display:flex;align-items:baseline;gap:9px;margin-bottom:8px;padding:0; font-family:var(--f-texte);font-size:12.5px;font-weight:600;color:var(--px-ink-2)} .px-aide{margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--px-ink-4)} /* ⭐ UNE LISTE, PLUS DES PASTILLES — demandé par Thomas le 2026-08-14. Les cases s'empilent en lignes pleine largeur dans une seule boîte : on parcourt une liste d'outils au lieu de balayer un nuage d'étiquettes. La surface, le liseré et le cyan de l'état coché ne changent pas — c'est le même composant, dans une autre disposition. ⚠️ C'est le CONTENEUR qui porte la boîte et le débordement caché, pas les lignes : sans lui les coins arrondis seraient rognés au carré par la première et la dernière ligne. */ .px-dem-outils .cases{display:flex;flex-direction:column; background:var(--px-ctl);border:1px solid var(--px-ctl-bd); border-radius:12px;overflow:hidden} .px-dem-outils .case{display:flex;align-items:center;gap:11px;cursor:pointer; padding:11px 14px;font-size:13.5px;color:var(--px-ink-2); transition:background .2s ease,color .2s ease} .px-dem-outils .case + .case{border-top:1px solid var(--px-ctl-bd)} .px-dem-outils .case:hover{color:var(--px-ink);background:rgba(255,255,255,.03)} /* La case elle-même reste un vrai `input` — le clavier et les lecteurs d'écran la trouvent — mais on redessine sa boîte. */ .px-dem-outils input[type=checkbox]{appearance:none;-webkit-appearance:none; flex:none;width:16px;height:16px;margin:0;border-radius:5px;cursor:pointer; background:rgba(0,0,0,.25);border:1px solid var(--px-ctl-bd); display:grid;place-content:center;transition:background .18s ease,border-color .18s ease} .px-dem-outils input[type=checkbox]::before{content:'';width:9px;height:9px; transform:scale(0);transition:transform .16s cubic-bezier(.3,.9,.3,1); background:#04262C; clip-path:polygon(14% 46%,0 60%,40% 100%,100% 22%,86% 8%,40% 72%)} .px-dem-outils input[type=checkbox]:checked{background:var(--px-cy);border-color:var(--px-cy)} .px-dem-outils input[type=checkbox]:checked::before{transform:scale(1)} .px-dem-outils input[type=checkbox]:focus-visible{outline:2px solid var(--px-cy);outline-offset:2px} /* ⚠️ `:has()` — la pastille entière s'allume quand sa case est cochée. Sans lui il faudrait une classe posée par un script, donc un état qui ment quand le script ne tourne pas. */ /* ⭐ La couleur arrive PAR UN BORD et s'éteint : un filet de 2 px à gauche de la ligne cochée, pas un contour qui referait une boîte. C'est la grammaire du site, appliquée telle quelle. Un `box-shadow` intérieur et non une bordure — une bordure décalerait le texte de 2 px à chaque clic. */ .px-dem-outils .case:has(input:checked){color:var(--px-ink); background:rgba(25,200,230,.08);box-shadow:inset 2px 0 0 var(--px-cy)} @media(prefers-reduced-motion:reduce){ .px-dem-outils .case,.px-dem-outils input[type=checkbox], .px-dem-outils input[type=checkbox]::before{transition:none} } /* Le formulaire de la page, dans la colonne de lecture. */ .px-dem-form .px-form{max-width:620px;margin:32px auto 0} .px-dem-form .px-recu{max-width:620px;margin-inline:auto} /* ⚠️⚠️ L'ATTRIBUT `hidden` NE CACHE RIEN dès qu'une règle de classe déclare un `display` : celle du navigateur pèse moins. Piège déjà payé, et `.px-candi` porte exactement la même parade. Sans cette ligne, le champ « Laquelle ? » resterait visible une fois replié par le script — vu sur une capture, jamais en relisant le code. */ .px-dem-form [hidden]{display:none} /* ══════════════════════════════════════════════════════════════════════════ LE RAPPEL DE L'OFFRE — piloté par `:has()`, SANS UNE LIGNE DE SCRIPT ⭐ Les cinq combinaisons sont toutes dans la page ; le CSS montre celle qui correspond aux deux menus. Un rappel rafraîchi par script afficherait « Starter 45,74 € » à quelqu'un qui vient de choisir Boost dès que le script ne tourne pas — c'est exactement ce que la règle « rien ne doit faire semblant » interdit. Ici il n'y a rien à rafraîchir. ⚠️ Et si `:has()` n'est pas géré : aucune ligne ne s'affiche, la phrase d'attente reste. On perd le rappel, on n'affiche JAMAIS un faux prix. ══════════════════════════════════════════════════════════════════════════ */ .px-dem-recap{margin:0 0 18px;padding:14px 16px;border-radius:12px; background:var(--px-ctl);border:1px solid var(--px-ctl-bd); box-shadow:inset 2px 0 0 var(--px-cy)} .px-dem-recap .vide{margin:0;font-size:12.5px;line-height:1.5;color:var(--px-ink-4)} .px-dem-recap .ligne{display:none} .px-dem-recap .nom{margin:0;font-family:var(--f-texte);font-size:11.5px;font-weight:600; letter-spacing:.05em;text-transform:uppercase;color:var(--px-ink-3)} .px-dem-recap .nom span{text-transform:none;letter-spacing:0;font-weight:500; color:var(--px-ink-4)} /* Unbounded sur le nombre : c'est la règle du site — titres ET chiffres. */ .px-dem-recap .prix{margin:4px 0 0;font-family:var(--f-titre);font-size:20px; font-weight:700;letter-spacing:-.02em;color:var(--px-ink); display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} /* Le prix plein, BARRÉ, juste à côté : c'est lui qui fait exister la remise. Petit et éteint — il ne doit pas concurrencer le prix réel. */ .px-dem-recap .prix s{font-family:var(--f-texte);font-size:12.5px;font-weight:500; letter-spacing:0;color:var(--px-ink-4);text-decoration-thickness:1px} /* ⭐ L'ÉCONOMIE, mise en avant à la demande de Thomas (2026-08-14). ⚠️ TROIS COULEURS ESSAYÉES, DANS CET ORDRE, le 2026-08-14 : le vert `--px-s4` (refusé), le bleu `--px-s3` (refusé), puis le CYAN `--px-cy`, tranché par Thomas. Ne pas « corriger » vers l'un des deux premiers. ⚠️ Conséquence à connaître : le cyan tient déjà le filet vertical de la carte, à quelques centimètres à gauche. L'économie ne sort donc plus par sa teinte mais par sa TAILLE et sa graisse — Unbounded 14,5 px en 700 face à un filet de 2 px. C'est ce qui la fait encore ressortir. */ .px-dem-recap .eco{margin:8px 0 0;display:flex;align-items:baseline;gap:8px; flex-wrap:wrap;font-size:13px;line-height:1.45} .px-dem-recap .eco b{font-family:var(--f-titre);font-size:14.5px;font-weight:700; letter-spacing:-.01em;color:var(--px-cy)} .px-dem-recap .eco span{color:var(--px-ink-4);font-size:12px} .px-dem-recap .offert{margin:7px 0 0;font-size:12.5px;line-height:1.5;color:var(--px-ink-3)} /* ⚠️ LES CINQ RÈGLES SONT ÉCRITES À LA MAIN, une par combinaison — c'est le seul endroit du site où une règle dépend de la VALEUR d'un menu. Ajouter une offre ou une périodicité oblige donc à ajouter sa ligne ici. L'oubli est silencieux mais bénin : le rappel reste sur la phrase d'attente. */ .px-form:has(#pxd-offre option[value="Freemium"]:checked) .px-dem-recap .ligne[data-offre="Freemium"], .px-form:has(#pxd-offre option[value="Starter"]:checked):has(#pxd-periode option[value="Mensuel"]:checked) .px-dem-recap .ligne[data-offre="Starter"][data-periode="Mensuel"], .px-form:has(#pxd-offre option[value="Starter"]:checked):has(#pxd-periode option[value="Annuel"]:checked) .px-dem-recap .ligne[data-offre="Starter"][data-periode="Annuel"], .px-form:has(#pxd-offre option[value="Boost"]:checked):has(#pxd-periode option[value="Mensuel"]:checked) .px-dem-recap .ligne[data-offre="Boost"][data-periode="Mensuel"], .px-form:has(#pxd-offre option[value="Boost"]:checked):has(#pxd-periode option[value="Annuel"]:checked) .px-dem-recap .ligne[data-offre="Boost"][data-periode="Annuel"]{display:block} /* Une offre choisie efface la phrase d'attente. */ .px-form:has(#pxd-offre option:checked:not([value=""])) .px-dem-recap .vide{display:none} /* ⚠️ Le Freemium n'a pas de périodicité : son menu disparaît, et le duo se referme sur une seule colonne pour ne pas laisser un trou à droite. `display:none` le sort aussi du parcours au clavier — mais le serveur vide quand même la valeur, parce qu'un champ masqué PART À L'ENVOI : c'est le navigateur qui poste, pas la feuille de style. */ .px-form:has(#pxd-offre option[value="Freemium"]:checked) .px-dem-periode{display:none} .px-form:has(#pxd-offre option[value="Freemium"]:checked) .px-duo:has(.px-dem-periode){ grid-template-columns:1fr} /* ══ LES TROIS PASTILLES DE RÉASSURANCE, sous le chapô du héros ════════════ ⭐ AUCUN DESSIN NEUF : ce sont des `.px-tag.px-tag-phrase`, la variante déjà employée sur les trois têtes de page. Cette classe ne porte QUE la disposition. ⚠️ UNE SEULE RANGÉE, colonnes égales. La version d'avant était un `flex-wrap` de quatre étiquettes centrées : elles se repliaient en deux lignes de largeurs inégales, chacune centrée pour son compte, et le bloc partait en biais. Une grille à trois colonnes égales les aligne sur leurs deux bords, et les pastilles font toutes la même largeur quel que soit le libellé — c'est ce qui manquait. ⚠️ `justify-items:stretch` + `text-align:center` : les `.px-tag` sont en `inline-flex`, donc sans étirement elles se recroquevilleraient sur leur texte au milieu de colonnes égales, et on retrouverait des largeurs différentes dans une grille régulière. */ .px-dem-gages{display:grid;grid-template-columns:repeat(3,1fr);gap:8px; margin:26px 0 0;padding:0;list-style:none} /* ⚠️ Corps et rembourrage réduits le 2026-08-14 — « plus petits les boutons de réassurance ». `.px-tag.px-tag-phrase` en pose 13,5 px et 8/18 ; le sélecteur reprend LES DEUX classes pour peser (0,3,0) et l'emporter. */ .px-dem-gages .px-tag.px-tag-phrase{display:flex;justify-content:center;text-align:center; width:100%;font-size:11.5px;padding:6px 12px} /* ⛔ SOUS 620 px, ELLES NE S'ÉTIRENT PLUS — retour de Thomas, 2026-08-20 : « ils ont tous la même taille et ils prennent toute la largeur, ça ne me va pas ». Elles s'empilaient en trois barres de 307 px identiques, ce qui les faisait lire comme des BOUTONS pleine largeur — donc comme des choses à toucher — alors que ce sont des mentions de réassurance. ⭐ Chacune reprend sa largeur naturelle et la rangée se centre. Mesuré à 375 px : 96 + 154 + 7 = 257 px pour 307 disponibles, donc les deux libellés courts tiennent sur une ligne et le long passe dessous. C'est ce que l'ordre voulu par Thomas rend possible — voir le commentaire de `demarrer.html`. ⚠️ Le `width:100%` de la règle du dessus doit être défait explicitement : le sélecteur reprend LES DEUX classes pour peser autant (0,3,0) et gagne par sa position. C'est la même parade que celle qui a déjà servi pour réduire le corps de ces pastilles. */ @media(max-width:620px){ .px-dem-gages{display:flex;flex-wrap:wrap;justify-content:center; gap:7px;margin-top:22px} .px-dem-gages .px-tag.px-tag-phrase{width:auto} } /* ══════════════════════════════════════════════════════════════════════════ LA FIN DE PARCOURS — pleine page, une seule colonne ⭐ Rien de dessiné : c'est le héros du site. Ces règles ne font que rendre la page à une colonne et centrer le bloc dans l'écran. ⚠️ La classe est posée sur le `` par un filtre `body_class`, pas par le bloc : un bloc est rendu PENDANT le corps, il ne peut pas masquer après coup ce qui a déjà été écrit au-dessus de lui. ══════════════════════════════════════════════════════════════════════════ */ .px-dem-final .px-dem-tete-col, .px-dem-final .px-dem-faq{display:none} /* La colonne unique reprend toute la grille, et le bloc se centre dans la hauteur d'écran restante — un écran de fin ne se lit pas en haut à gauche. ⚠️⚠️ TROIS CLASSES DANS LE SÉLECTEUR, ET C'EST INDISPENSABLE. La section de fin porte encore `.px-dem-form`, donc la règle du montage deux colonnes — `.px-dem-page > .px-dem-form{grid-column:2}` — la vise aussi. Elle pèse (0,2,0) et se trouve PLUS BAS dans la feuille : à poids égal elle gagne, et le bloc partait dans une colonne implicite créée à droite. C'était visible à l'œil et invisible dans le HTML — j'avais vérifié le texte, pas la boîte. (0,3,0) tranche la question. */ .px-dem-final .px-dem-page{grid-template-columns:minmax(0,1fr)} .px-dem-final .px-dem-page > .px-dem-fin{grid-column:1 / -1;grid-row:1; display:flex;align-items:center;justify-content:center; min-height:calc(100vh - 200px);padding:0;margin-inline:0} .px-dem-fin .px-hero.px-hero-centre{max-width:760px;padding:0} .px-dem-fin .px-dem-gages{margin-top:34px} /* ⚠️ Le `h1` de la fin doit peser autant que celui du héros : la règle de base vise `.px-hero .wp-block-heading`, donc on la laisse faire et on ne touche qu'à la mesure du texte. La spécificité est le piège récurrent de cette feuille — inutile d'en rajouter une couche ici. */ .px-dem-fin .px-hero p.sous:not(.sous-2){margin-top:24px;max-width:60ch} .px-dem-fin .px-hero p.sous b{color:var(--px-ink)} /* ⭐ LA LIGNE FINALE REPREND `sous-2`, la « phrase mise en avant » des héros : filet cyan de 3 px, fond dégradé, lueur qui sort par la gauche. Rien n'est redessiné ici — le balisage porte la classe, tout le traitement suit. ⚠️ ON NE TOUCHE QU'AU CORPS. Thomas la veut « pas aussi grosse » : 16,5 px dans un héros, 14 px ici, où elle vient après un sous-titre de 15 px et ferme la page au lieu de l'ouvrir. La mesure passe aussi de 46 à 60 caractères — le texte est plus long que celui d'un héros, et à 46 il tombait en colonne étroite. ⚠️ Le sélecteur porte un `p` ET la classe `.px-dem-fin` : la règle de base pèse (0,3,1), une version sans élément aurait perdu en silence. C'est le piège de spécificité de cette feuille, croisé trois fois aujourd'hui. ⚠️⚠️ `margin-inline:auto` EST INDISPENSABLE ICI. La règle de centrage des chapôs est `.px-hero-centre p.sous:not(.sous-2)` — elle EXCLUT justement cette classe, qui garde donc son `margin:26px 0 0` et se colle à gauche de son conteneur. Dans un héros aligné à gauche ça ne se voit pas ; sur une page centrée, si. ⚠️ Et le texte est aligné à GAUCHE dans le bloc, comme sur les autres pages : `.px-hero-centre` impose un `text-align:center` qui remonte jusqu'ici et faisait du bloc un pavé centré, ce qu'il n'est nulle part ailleurs sur le site. */ .px-dem-fin .px-hero p.sous.sous-2{margin:30px auto 0;font-size:14px; max-width:60ch;text-align:left} /* Le bouton de rattrapage, sur l'écran d'abandon. Il vient APRÈS le sous-titre et AVANT la ligne finale : l'action passe avant la mention. ⚠️ `width:auto` : `.px-form .px-btn` étire les boutons sur toute la largeur de leur carte, et cette règle-là ne vise pas que les formulaires. */ .px-dem-fin-action{display:flex;flex-wrap:wrap;justify-content:center;gap:12px; margin:32px 0 0} .px-dem-fin-action .px-btn{width:auto;display:inline-flex;margin-top:0} /* Sous 560 px les deux boutons s'empilent pleine largeur : côte à côte ils tomberaient à moins de 150 px chacun, et un libellé de trois mots s'y couperait en trois lignes. */ @media(max-width:560px){ .px-dem-fin-action{flex-direction:column;align-items:stretch} .px-dem-fin-action .px-btn{width:100%;justify-content:center} } /* ══════════════════════════════════════════════════════════════════════════ LA FAQ EN TROIS ONGLETS — dix-sept questions, centrées ⭐ Le composant est `.px-onglets`, celui des quatre temps de l'accueil et des échelles de « Pourquoi Prism ». Rien n'a été dessiné ni scripté : ces règles ne font que le RECADRER pour un contenu en une seule colonne. ══════════════════════════════════════════════════════════════════════════ */ .px-dem-onglets{margin-top:40px} .px-dem-faq .px-faq{margin-inline:auto} /* ⚠️⚠️ LE CENTRAGE DE LA BARRE NE VAUT QU'AU-DESSUS DE 480 px. En dessous, le thème lui donne `margin-inline:-34px` pour qu'elle aille TOUCHER les deux bords de l'écran — un débordement voulu, qui fait la piste à défilement. Écrit sans ce garde-fou, `margin-inline:auto` écrasait ce calage : la barre gardait sa largeur pleine mais repartait de la marge de page, et débordait de 34 px à droite. Mesuré à 375 px, invisible partout ailleurs. */ @media(min-width:481px){ .px-dem-onglets .px-onglets-barre{margin-inline:auto} } /* ⚠️ `.px-panneau` est une grille à DEUX colonnes de 52 px d'écart, faite pour un texte à gauche et une image à droite. Une FAQ n'a qu'une colonne : sans cette ligne, les questions occuperaient la moitié gauche et la moitié droite resterait vide. */ .px-dem-onglets .px-panneau{display:block;margin-top:28px} /* ⚠️⚠️ ET CETTE LIGNE-CI N'EST PAS UNE REDONDANCE. La feuille pose déjà `.px-panneau[hidden]{display:none}` — mais elle pèse (0,2,0), exactement comme la règle du dessus, qui est écrite APRÈS elle et l'emporterait donc sur les panneaux cachés. Résultat sans cette ligne : les trois onglets s'afficheraient en même temps, et le composant aurait l'air cassé alors que le script fonctionne. C'est le piège `[hidden]` du projet, revu par la spécificité. */ .px-dem-onglets .px-panneau[hidden]{display:none} /* ══ L'ACCEPTATION DES CONDITIONS — Freemium seulement ═════════════════════ ⭐ La case reprend le dessin de `.px-dem-outils` (le paragraphe porte les deux classes) : la case dessinée, le survol et le filet cyan de l'état coché viennent de là, rien n'est redessiné. Ces règles ne posent que la boîte et l'alignement d'une case suivie d'une phrase, plus longue qu'un libellé d'outil. */ .px-dem-cgv .case{align-items:flex-start;padding:10px 12px;border-radius:10px; background:var(--px-ctl);border:1px solid var(--px-ctl-bd); font-size:12.5px;line-height:1.45} .px-dem-cgv input[type=checkbox]{margin-top:1px} .px-dem-cgv a{color:var(--px-ink-2);border-bottom:1px solid var(--px-ctl-bd)} .px-dem-cgv a:hover{color:var(--px-cy);border-bottom-color:var(--px-cy)} /* La mention de paiement, sous le bouton. ⚠️ SANS FILET NI BORDURE — le liseré cyan a été essayé et refusé le 2026-08-14. C'est une mention, pas une phrase forte : elle se lit comme la mention de confidentialité qui la suit, en un cran plus lisible. */ .px-dem-paiement{margin:14px 0 0;font-size:12px;line-height:1.55; color:var(--px-ink-3)} /* La réassurance sous le bouton. Filet cyan à gauche : c'est `.px-chute`, la forme que le site donne déjà à ses phrases fortes. */ /* ⚠️ `.px-dem-engage` a été SUPPRIMÉ le 2026-08-14 : la réassurance qu'il habillait est partie sous « Ce à quoi vous vous engagez », où elle reprend `.px-sec-chapo` comme le reste de la colonne. Aucune règle orpheline. */ /* ══════════════════════════════════════════════════════════════════════════ LE FORMULAIRE RESSERRÉ — « c'est trop gros et ça prend trop de place » (Thomas, 2026-08-14) ⚠️⚠️ TOUT EST PRÉFIXÉ `.px-dem-form`, ET C'EST LA SEULE CHOSE QUI COMPTE ICI. `.px-form` est partagé par les TROIS formulaires du site — contact, affiliation, démarrage. Resserrer les règles de base rétrécirait « Réserver une démo » et « Candidature » au passage, sans que rien ne le signale : deux pages en ligne changeraient d'aspect pour une demande qui n'en visait qu'une. Vérifié avant d'écrire : les trois fichiers rendent bien `.px-form`. Le poids des sélecteurs suit : `.px-form input` pèse (0,1,1), `.px-dem-form .px-form input` pèse (0,2,1) — il l'emporte. La spécificité est le piège le plus fréquent de cette feuille, et il est ici volontaire. ══════════════════════════════════════════════════════════════════════════ */ .px-dem-form .px-form{padding:22px 22px 24px} .px-dem-form .px-form .px-champ{margin:0 0 11px} .px-dem-form .px-form label{margin-bottom:5px;font-size:11.5px} .px-dem-form .px-form input, .px-dem-form .px-form textarea, .px-dem-form .px-form select{font-size:14px;padding:8px 11px;border-radius:9px} .px-dem-form .px-form textarea{min-height:76px} .px-dem-form .px-duo{gap:0 12px} /* Une colonne de duo qui porte PLUSIEURS champs — le menu d'outils et sa précision. ⚠️ `min-width:0` : cinquième instance du piège de la largeur intrinsèque d'un enfant de grille, après la barre d'onglets, `.px-pq-duo` et les deux `fieldset`. Les libellés d'options sont longs, la colonne déborderait sans lui. */ .px-dem-form .px-dem-colonne{min-width:0} /* ══════════════════════════════════════════════════════════════════════════ LE DÉPLIANT À COCHER — « un sélecteur où on peut cocher des réponses » ⚠️⚠️ CE N'EST PAS UN `` ne retient QU'UNE valeur ; la question posée ici en attend plusieurs — Google Ads ET Search Console ET Analytics est le cas ordinaire. J'avais livré un menu simple, Thomas l'a repris le 2026-08-14. ⭐ C'est un `
` NATIF, celui de la FAQ du site : il s'ouvre sans JavaScript, le clavier l'atteint, un lecteur d'écran annonce son état. Rien qui IMITE un menu — la règle « rien ne doit faire semblant » vaut aussi pour les composants. ══════════════════════════════════════════════════════════════════════════ */ .px-dem-multi{border:0;padding:0;margin:0 0 11px;min-width:0} .px-dem-multi legend{display:flex;align-items:baseline;gap:9px;padding:0; margin-bottom:5px;font-family:var(--f-texte);font-size:11.5px;font-weight:650; color:var(--px-ink-2)} /* Le résumé reprend EXACTEMENT la surface des autres champs : même fond, même liseré, même rayon, même hauteur. Il doit se lire comme un champ de plus. */ .px-dem-choix{margin:0} .px-dem-choix summary{display:flex;align-items:center;justify-content:space-between; gap:10px;cursor:pointer;list-style:none; font-size:14px;line-height:1.5;color:var(--px-ink); background:var(--px-ctl);border:1px solid var(--px-ctl-bd);border-radius:9px; padding:8px 11px;transition:border-color .18s ease,background .18s ease} .px-dem-choix summary::-webkit-details-marker{display:none} .px-dem-choix summary:hover{border-color:rgba(255,255,255,.2)} .px-dem-choix summary:focus-visible{outline:2px solid var(--px-cy);outline-offset:2px} /* ⚠️ Le texte du résumé se coupe proprement : une colonne de formulaire est étroite, et deux noms d'outils y tiennent tout juste. Sans ça il pousserait le chevron hors de la boîte. */ .px-dem-choix summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Le chevron, dessiné en bordures — pas d'image, pas de police d'icônes. */ .px-dem-choix summary::after{content:'';flex:none;width:8px;height:8px;margin-right:2px; border-right:1.6px solid var(--px-ink-3);border-bottom:1.6px solid var(--px-ink-3); transform:translateY(-2px) rotate(45deg);transition:transform .2s ease} .px-dem-choix[open] summary::after{transform:translateY(2px) rotate(-135deg)} /* ⭐ LE RÉSUMÉ DIT VRAI SANS JAVASCRIPT. `:has()` bascule la phrase dès qu'une case est cochée ; le script, lui, ne fait que remplacer « Outils sélectionnés » par les noms réels. Sans script on est moins précis, jamais inexact — c'est la même règle que pour le rappel de prix. */ .px-dem-choix summary .plein{display:none} .px-dem-choix:has(input:checked) summary .vide{display:none} .px-dem-choix:has(input:checked) summary .plein{display:inline} .px-dem-choix:has(input:checked) summary{border-color:rgba(25,200,230,.45)} /* La liste dépliée, juste sous le résumé. Elle POUSSE le contenu au lieu de le recouvrir : une liste flottante serait rognée par la colonne de grille, et il faudrait la sortir du flux pour rien — elle n'est ouverte qu'un instant. */ .px-dem-choix .cases{margin-top:6px} /* L'aide sous un menu : une ligne discrète, qui ne pousse pas le champ suivant. */ .px-dem-form .px-aide{display:block;margin:5px 0 0;font-size:11.5px;line-height:1.4} /* Le titre du formulaire, à l'échelle de la colonne. */ .px-dem-form .px-sec-titre{font-size:clamp(21px,2vw,27px)} .px-dem-form .px-mention{font-size:11.5px;line-height:1.5} /* ══════════════════════════════════════════════════════════════════════════ « DÉMARRER » EN DEUX COLONNES — le texte à gauche, le formulaire à droite (demande de Thomas, 2026-08-14) ⚠️⚠️ LE FORMULAIRE EST LE FRÈRE DU CONTENU, PAS SON VOISIN. Mesuré sur la page en ligne le 2026-08-14 : WordPress enveloppe le contenu de la page dans un `div.entry-content.wp-block-post-content`, et le bloc du formulaire se pose APRÈS cette boîte. Aucune grille ne peut donc apparier une section du contenu avec le formulaire… tant que la boîte existe. ⭐ `display:contents` l'efface SANS toucher au DOM ni au balisage : ses sections deviennent les cases de la grille du `
`, à côté du formulaire. C'est ce qui évite d'apprendre au script de déploiement à imbriquer des blocs — la page reste « un unique bloc `core/html` ». ⭐ Et la maquette ouverte en local, qui n'a PAS cette boîte, obtient exactement la même structure de grille. Un seul rendu à vérifier. ══════════════════════════════════════════════════════════════════════════ */ /* ⚠️ LES RÈGLES DE `.px-dem-texte` ONT ÉTÉ SUPPRIMÉES le 2026-08-14 : la colonne de texte qu'elles habillaient n'existe plus, son contenu est descendu dans la FAQ. Aucune règle orpheline sur cette classe. ⏳ Restent en revanche `.px-dem-rassure` et `.px-dem-acces`, plus bas, que la page n'emploie plus non plus. Elles datent d'avant cette session et je ne les retire pas dans le même geste — supprimer du CSS a déjà emporté trois fois des règles voisines sur ce projet. Ménage à faire à froid. */ /* ⚠️⚠️ TOUT CE QUI SUIT EST SOUS `min-width:1081px`, ET CE N'EST PAS UN DÉTAIL. Première version écrite sans, et MESURÉE : 130 px de débordement à 375 px. Cause — `.px-pour` devient une PISTE À DÉFILEMENT en petit écran, calée sur `margin-inline:-34px` + `padding:… 34px` pour aller toucher les deux bords. Elle a donc BESOIN des 34 px de `.px-wrap`, que la grille lui retirait. ⭐ Sous 1081 px, plus une seule de ces règles ne s'applique : la page retombe exactement sur le mobile déjà réglé, formulaire empilé sous le texte dans l'ordre du DOM — qui est déjà le bon. Vérifié par comparaison avec un banc monté sur le commit précédent. ⭐ Et 1081 n'est pas choisi au hasard : `@media(max-width:1080px)` est DÉJÀ le seuil où `.px-pour` passe à une colonne. On se branche sur le seuil existant au lieu d'en inventer un sixième. */ /* ⚠️⚠️ LE FORMULAIRE EST LE FRÈRE DU CONTENU, PAS SON VOISIN. Mesuré sur la page en ligne : WordPress enveloppe le contenu dans un `div.entry-content.wp-block-post-content`, et le bloc du formulaire se pose APRÈS cette boîte. `display:contents` l'efface sans toucher au DOM : ses sections deviennent les cases de la grille du `
`, à côté du formulaire. C'est ce qui évite d'apprendre au script de déploiement à imbriquer des blocs — la page reste « un unique bloc `core/html` ». ⚠️⚠️ ET LA GRILLE VAUT À TOUTES LES LARGEURS, ce n'est pas un excès. Elle n'existait d'abord qu'au-dessus de 1081 px ; en dessous, l'ordre du DOM reprenait la main — tête, FAQ, formulaire — et LA FAQ S'AFFICHAIT AVANT LE FORMULAIRE. Défaut mesuré à 351 px, invisible sur grand écran. Une seule colonne ici, trois rangées, dans le bon ordre. ⚠️ `margin-inline:0` sur la FAQ, avec un sélecteur assez LOURD pour gagner : voir le détail plus bas, c'est la sixième instance du piège de spécificité. */ .px-dem-page{display:grid;grid-template-columns:minmax(0,1fr)} .px-dem-page > .wp-block-post-content{display:contents} .px-dem-page > *, .px-dem-page > .wp-block-post-content > *{grid-column:1} /* ⚠️ `margin-inline:0` ICI AUSSI, et pour la même raison que sur la FAQ : la colonne porte `.px-wrap`, qui pose `margin:0 auto`. Sur un enfant de grille cette marge automatique empêche l'étirement — la boîte se réduit à son contenu et se centre. Le défaut ne se voyait PAS sur grand écran, où la piste est plus étroite que le texte du héros et le rognait de toute façon ; il apparaissait à 1080 px, où la tête faisait 853 px dans une piste de 1065. Mesuré, pas déduit. */ .px-dem-page .px-dem-tete-col{grid-row:1;margin-inline:0} .px-dem-page > .px-dem-form{grid-row:2} /* ⛔ « TROP D'ESPACE ENTRE CES BOUTONS ET LE DÉBUT DU FORMULAIRE » — Thomas, 2026-08-20. Mesuré à 375 px : 128 px de vide, dont 104 venaient du rembourrage générique de `.px-sec` et 24 de la marge du formulaire. ⚠️ Ces 104 px ne sont pas une erreur : c'est l'écart que le site met entre deux SECTIONS. Ici le formulaire n'est pas une section de plus, c'est la suite immédiate de la tête — au-dessus de 1081 px ils sont même côte à côte, et la règle du montage deux colonnes remet ce rembourrage à zéro. En une seule colonne, personne ne l'avait repris : la valeur générique s'appliquait par défaut. ⭐ ZÉRO, ET CE N'EST PAS UN OUBLI : la carte porte DÉJÀ sa propre marge de 32 px. Mesuré à 375 px, l'écart visible tombe de 128 px à 56 — la séparation vient donc du composant lui-même, pas d'un rembourrage de section empilé par-dessus. Un premier essai à 28 px laissait 84 px, encore trop : c'est en remontant la chaîne élément par élément qu'on voit que deux espacements se cumulaient sans le savoir. ⚠️ Le palier va jusqu'à 1080 et non 820 : entre les deux, `.px-sec` monte même à 156 px. */ @media(max-width:1080px){ .px-dem-page > .px-dem-form{padding-top:0} } .px-page.px-dem-page > .wp-block-post-content > .px-dem-faq, .px-dem-page > .px-dem-faq{grid-row:3;margin-inline:0} @media(min-width:1081px){ .px-dem-page{ grid-template-columns:minmax(0,1fr) minmax(0,var(--dem-form,500px)); column-gap:56px; max-width:1240px;margin-inline:auto;padding-inline:34px} /* Pleine largeur PAR DÉFAUT — le héros, le fil, et tout ce qu'on ajoutera demain. Seules les deux cases appariées sortent du rang, et elles le demandent explicitement : une section oubliée s'affiche en pleine largeur, jamais coincée dans une demi-colonne. ⚠️ Deux sélecteurs et pas un : `display:contents` ne change rien au DOM, donc les sections restent des ENFANTS de `.wp-block-post-content`. */ /* ⚠️⚠️ LES RANGÉES SONT EXPLICITES, et ce n'est pas de la prudence inutile : l'ordre du DOM est tête → FAQ → formulaire, parce que le formulaire est un bloc serveur posé APRÈS tout le contenu. En placement automatique, la FAQ prendrait la rangée 2 et le formulaire la rangée 3 — il se retrouverait SOUS la FAQ. On nomme donc les deux rangées. */ .px-dem-page > *, .px-dem-page > .wp-block-post-content > *{grid-column:1 / -1} .px-dem-page .px-dem-tete-col{grid-column:1;grid-row:1} .px-dem-page > .px-dem-form {grid-column:2;grid-row:1} /* ⚠️⚠️ DEUX PIÈGES SUPERPOSÉS ICI, et il a fallu les mesurer tous les deux. 1. UNE MARGE `auto` SUR UN ENFANT DE GRILLE L'EMPÊCHE DE S'ÉTIRER : il prend sa largeur de CONTENU et se centre dans sa zone. Le placement est juste, la boîte ne l'est pas, et rien ne le signale. La marge vient de `.px-page > .wp-block-post-content > :not(.px-wrap)`, qui centre les sections hors grille ; la règle voisine qui neutralise `.px-sec` ne reprend que `max-width` et `padding-inline`, pas la marge. La tête, elle, y échappe déjà : elle porte `.px-wrap`, que le `:not()` exclut. 2. LA SPÉCIFICITÉ — SIXIÈME INSTANCE sur ce projet. Le coupable pèse (0,3,0) : `.px-page` + `.wp-block-post-content` + `:not(.px-wrap)`, un `:not()` prenant le poids de son argument. Un `.px-dem-page .px-dem-faq` ne pèse que (0,2,0) : il perd, EN SILENCE. La FAQ faisait alors 509 px centrés au lieu des 1172 de la rangée, avec un `grid-column` pourtant calculé à `1 / -1`. C'est ce qui rendait le défaut illisible. ⚠️ Et 509 px, ce n'était pas un chiffre au hasard : les `details` fermés ne comptent pas dans la largeur maximale, donc la section se réduisait à son plus long titre visible. Le second sélecteur sert la maquette ouverte en local, qui n'a pas la boîte `entry-content` de WordPress. */ .px-page.px-dem-page > .wp-block-post-content > .px-dem-faq, .px-dem-page > .px-dem-faq{grid-column:1 / -1;grid-row:2;margin-inline:0} /* ⭐ LA TÊTE RESTE EN PLACE tant que le formulaire défile à côté d'elle. Un élément `sticky` se déplace dans la boîte de SON PARENT : ici la colonne de gauche, qui s'étire sur toute la hauteur de la rangée. Quand la rangée est passée — donc quand la FAQ arrive — le collage cesse de lui-même. Rien à désactiver, aucun script, aucun observateur. ⚠️ C'est pour ça que la colonne porte `.px-wrap` ET `.px-dem-tete-col` sur le MÊME élément : un `.px-wrap` imbriqué en plus aurait fait la hauteur de son contenu et non celle de la rangée, et le collage n'aurait eu nulle part où se déplacer. ⚠️ `min-height:100vh` COMPREND le rembourrage — la feuille pose `box-sizing:border-box` partout. Sans ça le bloc dépasserait l'écran et ne se collerait jamais vraiment en haut. Les 124 px du haut dégagent l'en-tête fixe. */ /* ⚠️ LA RANGÉE COMMENCE EN HAUT. `.px-sec` pose 156 px de rembourrage haut — l'écart normal entre deux sections du site — mais ici le formulaire est la PREMIÈRE chose de la page : ces 156 px s'ajoutaient aux 86 px du `
` et repoussaient le titre à 342 px du haut. Mesuré sur capture, pas déduit. La FAQ, elle, garde les siens : elle a bien une section au-dessus. */ /* ⚠️⚠️ `margin-block-start:0` — DÉFAUT VU EN PRODUCTION SEULEMENT. WordPress génère `.wp-block-group-is-layout-flow > :where(:not(:first-child)) { margin-block-start:24px }`. Le formulaire est le second enfant du `
` : il descendait donc de 24 px, et les deux colonnes ne démarraient pas au même niveau — tête à 114, formulaire à 138. Le banc local ne pouvait pas le montrer : cette feuille n'existe que dans WordPress. Mesuré sur la page en ligne après déploiement. La règle de WordPress pèse (0,1,0) à cause de ses `:where()` ; ce sélecteur en (0,2,0) l'emporte. */ .px-dem-page > .px-dem-form{padding-top:0;margin-block-start:0} /* ⚠️ Et la carte perd sa marge haute de 32 px. Elle sert à la détacher du titre de section — titre qui n'existe plus ici depuis qu'il a été retiré. La carte s'aligne donc sur les 86 px du `
`, c'est-à-dire aussi haut que l'en-tête fixe le permet. ⚠️ Cette marge se replie par COLLAPSUS à travers `.px-wrap`, qui n'a ni rembourrage ni bordure : c'est le wrap qu'on voyait descendre, pas la carte. La retirer ici les remonte tous les deux. Sous 1081 px on la garde — le formulaire y suit la tête, et l'écart est voulu. */ .px-dem-form .px-form{margin-top:0} /* ⭐ LA TÊTE RESTE EN PLACE tant que le formulaire défile à côté d'elle. `top:96px` dégage l'en-tête fixe quand le bloc est collé ; sa hauteur minimale vaut donc l'écran MOINS ce dégagement, pour que le centrage se fasse dans la zone réellement visible et pas dans une boîte qui déborde par le bas. ⚠️ Plus de rembourrage haut ici : il valait 124 px et s'ajoutait au centrage, ce qui enfonçait la tête d'autant. Le dégagement de l'en-tête est le rôle de `top`, pas d'un rembourrage. */ .px-dem-page .px-dem-tete-fixe{position:sticky;top:96px; min-height:calc(100vh - 96px); display:flex;flex-direction:column;justify-content:center; padding-block:0 40px} .px-dem-page .px-hero.px-hero-centre.px-dem-tete{padding-top:0} /* La géométrie de page passe du `.px-wrap` au `
`. La laisser aux deux ajouterait 34 px de marge DANS chaque colonne et décalerait la colonne de droite de sa propre gouttière. Valeurs identiques à `.px-wrap` : 1240 et 34. */ .px-dem-page .px-wrap{max-width:none;padding:0} /* ⚠️ `.px-pour` est une grille à DEUX colonnes sur toute la largeur de page. Dans une demi-colonne ses colonnes tombent à ~285 px et le texte se hache. */ } /* ══════════════════════════════════════════════════════════════════════════ LE CONSENTEMENT AUX COOKIES — l'habillage de tarteaucitron ⭐ LA BIBLIOTHÈQUE EST CHARGÉE SANS SA FEUILLE (`useExternalCss: true`). Tout ce qui suit est donc l'habillage COMPLET, pas une surcharge : sans ce bloc, le bandeau s'affiche en HTML nu. Les sélecteurs sont les siens — on ne peut pas ajouter de classe à un balisage qu'elle écrit elle-même. ⚠️⚠️ LE PIÈGE À NE PAS REPRODUIRE : `.tarteaucitronHidden` ne doit JAMAIS passer en `!important`. La bibliothèque révèle une catégorie de services en posant un `display:block` EN LIGNE sans retirer la classe — mesuré sur le banc : `class="tarteaucitronHidden" style="display: block;"`. Le style en ligne l'emporte sur la règle de classe, et c'est exactement ce qui fait apparaître Google Ads dans le panneau. Un `!important` ici masquerait le seul service déclaré, sans rien signaler. ══════════════════════════════════════════════════════════════════════════ */ #tarteaucitronRoot *{box-sizing:border-box} #tarteaucitronRoot button{font-family:var(--f-texte);cursor:pointer;border:0;background:none} /* ⚠️⚠️ LES ÉTATS FERMÉS SONT À NOTRE CHARGE, ET RIEN NE LE SIGNALE. Mesuré sur le banc, élément par élément : · `#tarteaucitronAlertBig` reçoit un `display:block` EN LIGNE quand la bibliothèque veut le montrer — il doit donc être fermé par la feuille, sinon le bandeau reste affiché pour qui a DÉJÀ répondu ; · `#tarteaucitron` et `#tarteaucitronBack` ne reçoivent AUCUN style en ligne au repos : sans ces deux règles, le panneau de gestion s'affiche ouvert en permanence, par-dessus toutes les pages du site. C'est le prix de `useExternalCss` : on hérite aussi de ce que la feuille d'origine faisait sans le dire. */ #tarteaucitronAlertBig,#tarteaucitron,#tarteaucitronBack{display:none} /* Ce que la bibliothèque masque d'elle-même. SANS `!important` — voir plus haut. */ #tarteaucitron #tarteaucitronServices .tarteaucitronHidden{display:none} #tarteaucitronRoot .tarteaucitronH1,#tarteaucitronRoot .tarteaucitronH2, #tarteaucitronRoot .tarteaucitronH3{display:block} /* ── LE BANDEAU ───────────────────────────────────────────────────────────── Collé en bas, au-dessus de l'en-tête fixe (60) mais sous le panneau (90). La couleur arrive par le bord HAUT et s'éteint vers la droite : c'est la règle de tout le site, pas un fond coloré ni un halo autour d'une boîte. */ /* ⚠️⚠️ CE BANDEAU NE PEUT PAS ÊTRE UNE GRILLE FLEXIBLE, et c'est une contrainte, pas un choix. La bibliothèque l'affiche en lui posant un `display: block` EN LIGNE — mesuré : `style="display: block; opacity: 1;"`. Aucun `display:flex` de la feuille ne peut l'emporter là-dessus, et le forcer en `!important` figerait le bandeau à l'écran le jour où elle le referme avec un `display:none` en ligne. La mise en page suit donc le flux : le texte en bloc, les actions en `inline-flex` à la ligne suivante. ⭐ Symptôme si on l'oublie : tout se met à couler comme du texte, et la dernière ligne du paragraphe se retrouve à gauche des boutons. */ #tarteaucitronAlertBig{position:fixed;left:0;right:0;bottom:0;z-index:80; /* ⭐ RESSERRÉ ET CENTRÉ — demande de Thomas du 2026-08-17. À 1240 px le bandeau s'étirait sur toute la largeur de page et son texte laissait un grand vide à droite. Il tient maintenant la largeur de ce qu'il dit. */ max-width:920px;margin:0 auto 18px;width:calc(100% - 36px); padding:16px 22px 18px;border-radius:var(--px-r);text-align:center; background:var(--px-surface-hi);border:1px solid var(--px-rule); box-shadow:0 20px 54px -22px rgba(0,0,0,.85); /* ⚠️⚠️ `overflow:hidden` N'EST PAS DÉCORATIF : c'est LUI qui fait suivre au filet cyan l'arrondi des coins. Un pseudo-élément de 3 px de haut ne peut pas reprendre un rayon de 16 px — le navigateur l'écrase à sa hauteur, et le filet dépassait donc en ligne droite par-dessus la courbe du coin. C'est la boîte parente qui doit le découper, pas le filet qui doit s'arrondir. */ overflow:hidden; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} #tarteaucitronAlertBig::before{content:'';position:absolute;inset:0 0 auto;height:3px; background:linear-gradient(90deg,var(--px-cy),rgba(25,200,230,0) 68%)} /* ⭐ LE TEXTE PREND SA PROPRE LIGNE, les actions la suivante. En le laissant partager la ligne des boutons, sa dernière ligne se retrouvait à leur gauche et la rangée devenait illisible. Et la mesure est bornée : au-delà de 82 caractères l'œil perd la ligne suivante. */ /* ⭐ `margin:0 auto` et non plus `0` : dans un bandeau centré, une mesure bornée doit être centrée elle aussi, sinon elle reste calée à gauche et c'est le vide à droite qui se voit. */ #tarteaucitronDisclaimerAlert{display:block;margin:0 auto 12px;max-width:76ch; font-family:var(--f-texte);font-size:13px;line-height:1.55;color:var(--px-ink-2)} #tarteaucitronDisclaimerAlert strong{color:var(--px-ink);font-weight:700} /* ⭐ ACCEPTER ET REFUSER ONT LA MÊME TAILLE, LE MÊME POIDS ET LE MÊME NIVEAU. Ce n'est pas une préférence de mise en page : la CNIL demande que refuser soit aussi simple qu'accepter. Un « Refuser » plus petit, plus pâle ou relégué dans le panneau rendrait le recueil irrégulier. */ /* ⚠️⚠️ LA SPÉCIFICITÉ, 8ᵉ INSTANCE SUR CE PROJET, et cette fois c'est ma propre remise à zéro qui mordait : `#tarteaucitronRoot button{background: none}` pèse (1,0,1) — un identifiant ET un nom d'élément — là où `#tarteaucitronPersonalize2` ne pèse que (1,0,0). Le bouton « Tout accepter » perdait son cyan sans que rien ne le signale, et se retrouvait à égalité visuelle avec « Tout refuser ». D'où le préfixe sur CHAQUE règle de bouton ci-dessous. */ /* ⚠️ Les marges sont symétriques (`0 5px`) et non plus « tout à droite » : dans une rangée centrée, une marge d'un seul côté décale l'ensemble de sa valeur et le centrage tombe à côté. */ #tarteaucitronRoot #tarteaucitronPersonalize2,#tarteaucitronRoot #tarteaucitronAllDenied2{ display:inline-flex;align-items:center;justify-content:center;vertical-align:middle; font-size:13.5px;font-weight:700;letter-spacing:-.01em;margin:0 5px; padding:11px 19px;border-radius:var(--px-r-sm);transition:.16s} #tarteaucitronRoot #tarteaucitronPersonalize2{background:var(--px-cy);color:#fff} #tarteaucitronRoot #tarteaucitronPersonalize2:hover{background:#12B4D0; box-shadow:0 0 28px -8px rgba(25,200,230,.9)} #tarteaucitronRoot #tarteaucitronAllDenied2{background:var(--px-ctl); border:1px solid var(--px-ctl-bd);color:var(--px-ink-2)} #tarteaucitronRoot #tarteaucitronAllDenied2:hover{color:var(--px-ink); border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)} /* Le troisième chemin — régler service par service — se lit comme un lien : il n'est ni un accord ni un refus, et ne doit pas peser comme eux. */ #tarteaucitronRoot #tarteaucitronCloseAlert,#tarteaucitronRoot #tarteaucitronPrivacyUrl{ font-size:12.5px;color:var(--px-ink-3);text-decoration:underline; text-underline-offset:3px;padding:6px 2px;margin:0 7px;vertical-align:middle} #tarteaucitronRoot #tarteaucitronCloseAlert:hover, #tarteaucitronRoot #tarteaucitronPrivacyUrl:hover{color:var(--px-ink)} /* ⚠️ La classe que la bibliothèque réserve aux lecteurs d'écran. Sans sa feuille, elle ne cache plus rien : le titre « Panneau de gestion des cookies » s'affichait en clair au milieu de la page, hors de tout bloc. */ #tarteaucitronRoot .tac_visually-hidden{position:absolute;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Les glyphes ☑/☒ de la bibliothèque ne sont pas repris : les boutons portent déjà « Tout accepter » et « Tout refuser » en toutes lettres. */ #tarteaucitronRoot .tarteaucitronCheck,#tarteaucitronRoot .tarteaucitronCross{display:none} @media (max-width:720px){ #tarteaucitronAlertBig{padding:18px} /* Pleine largeur et empilés : à cette largeur, deux boutons côte à côte tombent sous la cible tactile de 44 px recommandée. */ #tarteaucitronRoot #tarteaucitronPersonalize2, #tarteaucitronRoot #tarteaucitronAllDenied2{display:flex;width:100%;margin:0 0 8px} #tarteaucitronRoot #tarteaucitronCloseAlert{margin-left:0} } /* ── LE VOILE ET LE PANNEAU ───────────────────────────────────────────────── ⚠️ `#tarteaucitronBack` est posé en `display:none` par la bibliothèque et passé à `block` quand le panneau s'ouvre : on habille, on ne décide pas. */ #tarteaucitronBack{position:fixed;inset:0;z-index:89; background:rgba(4,7,10,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} /* ⭐⭐ CENTRÉ PAR `inset:0` + `margin:auto`, ET NON PAR `top:50%` + `transform`. Le centrage par pourcentage se résout contre la hauteur du bloc conteneur : quand celle-ci n'est pas celle qu'on croit, la boîte remonte et son haut sort de l'écran — c'est ce que Thomas a vu sur `/cookies/` le 2026-08-17, le titre du panneau coupé hors cadre. ⭐ `inset:0` + `margin:auto` + une largeur ET une hauteur définies centrent sur LES DEUX AXES sans aucun pourcentage et sans transformation : la boîte ne peut plus se décentrer, quelle que soit la page. `height:max-content` est indispensable — sans hauteur définie, `margin:auto` n'a rien à répartir et la boîte s'étire du haut en bas de l'écran. */ #tarteaucitron{position:fixed;z-index:90;inset:0;margin:auto; width:min(720px,calc(100% - 32px)); height:max-content;max-height:min(82vh,760px);overflow:auto; /* ⭐⭐ FOND BLANC OPAQUE — demande de Thomas du 2026-08-17 : « on ne voit rien ». `--px-surface-hi` est un dégradé SEMI-TRANSPARENT, fait pour des blocs posés sur la page ; sous un panneau modal il laissait passer le héros et ses boutons, et le texte devenait illisible. C'est le seul endroit du site qui bascule en clair, et c'est assumé : un panneau de réglages n'est pas un bloc de contenu, il doit se détacher franchement. ⚠️ CONSÉQUENCE : toutes les encres du panneau sont reprises en clair ci-dessous. Une couleur oubliée sur `--px-ink*` disparaît sur du blanc. */ background:#fff;border:1px solid rgba(11,16,22,.12); border-radius:var(--px-r);box-shadow:0 30px 80px -28px rgba(0,0,0,.75); /* ⭐ `overscroll-behavior:contain` — arrivé en bas de la liste, la molette ne se propage plus à la page derrière. Sans lui, le panneau finit de défiler et c'est la page qui repart, ce qui donne l'impression que le panneau glisse. C'est la propriété faite pour ça, et elle est parfaitement supportée ; un verrou `overflow:hidden` sur le corps, lui, ferait disparaître la barre de défilement de la page et décalerait toute la mise en page de sa largeur au moment de l'ouverture. */ overscroll-behavior:contain; /* ⚠️ LA BARRE LONGE LE BORD DROIT. Ma première version lui donnait un `border:3px solid transparent` avec `background-clip:content-box` : le pouce se détachait alors du bord et flottait au milieu du blanc — « posée comme de la merde », et c'était juste. Ici le rail touche le bord, le pouce le remplit, et un liseré à gauche du rail l'assoit dans la boîte. */ scrollbar-width:thin;scrollbar-color:rgba(11,16,22,.28) rgba(11,16,22,.05)} #tarteaucitron::-webkit-scrollbar{width:11px} #tarteaucitron::-webkit-scrollbar-track{background:rgba(11,16,22,.05); border-left:1px solid rgba(11,16,22,.08)} #tarteaucitron::-webkit-scrollbar-thumb{background:rgba(11,16,22,.26); border-radius:0} #tarteaucitron::-webkit-scrollbar-thumb:hover{background:rgba(11,16,22,.4)} /* ⭐⭐ LA PAGE EST VERROUILLÉE PENDANT QUE LE PANNEAU EST OUVERT. `overscroll-behavior` ne règle QUE le débordement d'un défilement parti dans le panneau ; la molette actionnée SUR LE VOILE, elle, défile la page — et c'est ce que Thomas voyait encore. Aucune propriété de défilement ne le rattrape : il faut empêcher la page de défiler. ⚠️ LA BIBLIOTHÈQUE NE POSE AUCUNE CLASSE SUR LE CORPS quand elle ouvre le panneau — elle écrit un `display:block` EN LIGNE, et c'est tout. D'où le `:has()` sur ce style en ligne, faute de meilleure prise. Le motif `:has()` est déjà celui du rappel de prix de `/demarrer/` : c'est la maison. ⚠️ Cette accroche est FRAGILE — elle dépend de la chaîne exacte écrite par la bibliothèque (mesuré : `display: block; opacity: 1;`). Si une mise à jour la change, la règle cesse simplement de s'appliquer et on retrouve le comportement d'avant : le défaut se voit, il ne casse rien. ⚠️ Sur un système à barre de défilement permanente (Windows), le verrou fait disparaître celle de la page et décale la mise en page de sa largeur le temps de l'ouverture. Sur macOS, où la barre est en surimpression, il n'y a aucun décalage. Compromis assumé : le décalage dure le temps du panneau, le défilement fantôme, lui, se voyait à chaque fois. */ html:has(#tarteaucitron[style*="display: block"]){overflow:hidden} #tarteaucitron #tarteaucitronServices{padding:26px 26px 22px} /* ⚠️⚠️ `position:absolute` ÉTAIT UN DÉFAUT, PAS UN DÉTAIL. Le panneau défile à l'intérieur de lui-même (`overflow:auto`) : un enfant absolu s'ancre à sa boîte de REMBOURRAGE, qui défile avec le contenu. Dès qu'on descendait dans la liste des services, « Fermer » quittait le coin haut et s'affichait au milieu de la page, hors du panneau — c'est le bouton égaré de la capture de Thomas. `sticky` le maintient visible sans le sortir du flux. ⚠️ Le `float` est nécessaire : le bouton est le PREMIER enfant du panneau, sans lui il occuperait une ligne entière au-dessus du titre. Préfixés eux aussi — même piège de spécificité que les boutons du bandeau. */ /* ══ LES ENCRES DU PANNEAU, EN CLAIR ══════════════════════════════════════ ⚠️ Valeurs littérales et non variables de palette : la palette du site est entièrement pensée pour du texte CLAIR sur fond sombre, il n'existe aucune encre foncée à réutiliser. Les contrastes sont visés, pas choisis à l'œil — sur blanc : titre ≈ 19:1, texte ≈ 8:1, étiquettes ≈ 4,6:1, lien ≈ 4,7:1. ⚠️ Le cyan de la marque tombe à 1,9:1 sur du blanc : illisible. Le lien reprend donc un cyan ASSOMBRI (#0E7C90) — même famille, contraste tenu. ══════════════════════════════════════════════════════════════════════════ */ #tarteaucitronRoot #tarteaucitronClosePanel{position:sticky;top:10px;z-index:2; float:right;margin:0 10px 0 0; font-size:12.5px;color:#6A7380;padding:6px 8px;border-radius:var(--px-r-sm)} #tarteaucitronRoot #tarteaucitronClosePanel:hover{color:#0B1016; background:rgba(11,16,22,.06)} /* ⭐ LA TÊTE DU PANNEAU EST CENTRÉE — demande de Thomas du 2026-08-17 : titre, sous-titre, lien vers la politique, et « Préférences pour tous les services ». Les deux boutons de cette rangée suivent : les laisser à gauche sous une étiquette centrée casserait l'axe. ⚠️ La liste des services, elle, reste alignée à gauche : c'est une liste, elle se lit en colonne. */ #tarteaucitronRoot #tarteaucitronMainLineOffset{text-align:center} #tarteaucitronRoot #tarteaucitronMainLineOffset .tarteaucitronAsk{justify-content:center} #tarteaucitronRoot .tarteaucitronH1{font-family:var(--f-titre);font-size:19px; font-weight:700;letter-spacing:-.035em;color:#0B1016;margin:0 0 12px;padding-right:70px} #tarteaucitronInfo{font-size:13px;line-height:1.55;color:#4A535F;margin:0 0 20px} #tarteaucitronRoot #tarteaucitronPrivacyUrlDialog{font-size:13px;color:#0E7C90; text-decoration:underline;text-underline-offset:3px} #tarteaucitronRoot .tarteaucitronH2{font-family:var(--f-texte);font-size:10.5px; font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6A7380} #tarteaucitronRoot .tarteaucitronH3{font-size:12.5px;color:#6A7380;margin:10px 0 4px} /* Une ligne de service : le nom à gauche, les deux réponses à droite. */ #tarteaucitronRoot .tarteaucitronLine{display:flex;flex-wrap:wrap;gap:10px 14px; align-items:center;justify-content:space-between; padding:14px 0;border-top:1px solid rgba(11,16,22,.1);list-style:none} #tarteaucitronRoot .tarteaucitronMainLine{display:block;border-top:0;padding-top:0} #tarteaucitronRoot .tarteaucitronName{flex:1 1 200px;font-size:14px;color:#0B1016} #tarteaucitronRoot .tarteaucitronName .tarteaucitronReadmoreSeparator, #tarteaucitronRoot .tarteaucitronName a{font-size:12.5px;color:#5A6472} #tarteaucitronRoot .tarteaucitronStatusInfo{font-size:12px;color:#5A6472} #tarteaucitronRoot .tarteaucitronAsk{display:flex;gap:8px;flex:0 0 auto} #tarteaucitronRoot .tarteaucitronAllow,#tarteaucitronRoot .tarteaucitronDeny{ font-size:12.5px;font-weight:700;padding:9px 15px;border-radius:var(--px-r-sm); background:#F1F4F7;border:1px solid rgba(11,16,22,.14);color:#3B434E;transition:.16s} #tarteaucitronRoot .tarteaucitronAllow:hover,#tarteaucitronRoot .tarteaucitronDeny:hover{ color:#0B1016;border-color:rgba(11,16,22,.3);background:#E7EBF0} /* L'état retenu s'allume. ⭐ Le vert du site dit « en place » et le rouge n'existe pas dans la palette : un refus n'est pas une alerte, il s'affiche simplement comme le choix actif. ⚠️ `--px-pos` (#3FD69C) ne fait que 1,9:1 sur du blanc — le vert est donc assombri à #0C8A60, mesuré à 4,6:1, sur le même fond teinté. */ #tarteaucitronRoot .tarteaucitronIsAllowed .tarteaucitronAllow{ background:rgba(63,214,156,.18);border-color:rgba(12,138,96,.4);color:#0C8A60} #tarteaucitronRoot .tarteaucitronIsDenied .tarteaucitronDeny{ background:rgba(11,16,22,.08);border-color:rgba(11,16,22,.32);color:#0B1016} #tarteaucitronRoot .tarteaucitronBorder>ul{margin:0;padding:0;list-style:none} #tarteaucitronRoot .tarteaucitronTitle{margin:18px 0 2px} #tarteaucitronRoot .tarteaucitronTitle button{font-family:var(--f-texte);font-size:10.5px; font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6A7380;padding:0} #tarteaucitronRoot .tarteaucitronDetails{font-size:12.5px;line-height:1.5; color:#5A6472;margin:4px 0 0} #tarteaucitronRoot .tarteaucitronListCookies{font-size:12px;color:#5A6472} #tarteaucitronRoot .cookie-list{margin:0;padding:0 0 0 14px;font-size:12px;color:#5A6472} #tarteaucitronRoot .clear{display:none} #tarteaucitronRoot #tarteaucitronNoServicesTitle{font-size:13px;color:#5A6472; border-top:1px solid rgba(11,16,22,.1);padding:14px 0} /* ⭐ Le bouton « Enregistrer » (`#tarteaucitronSaveButton`) porte déjà la classe `.tarteaucitronAllow` — vérifié dans le DOM, il est donc habillé plus haut. Il ne manque que son dégagement du bloc au-dessus. */ #tarteaucitronRoot #tarteaucitronSave{margin:18px 0 0} @media (max-width:640px){ #tarteaucitron #tarteaucitronServices{padding:22px 18px 18px} #tarteaucitronRoot .tarteaucitronAsk{width:100%} #tarteaucitronRoot .tarteaucitronAllow,#tarteaucitronRoot .tarteaucitronDeny{flex:1} } /* ══════════════════════════════════════════════════════════════════════════ LA POP-UP DE CONTACT RAPIDE ⭐ ELLE REPREND `.px-form` : champs, focus cyan, `.px-duo` à deux colonnes et état d'erreur viennent tous du formulaire existant. Ce bloc ne dessine que la BOÎTE — le voile, le centrage, la fermeture. ⚠️⚠️ SANS JAVASCRIPT, RIEN DE TOUT CECI NE S'APPLIQUE COMME UN MODAL : le bloc est alors une section ordinaire en fin de page, et l'ancre y descend. C'est pour ça que `position:fixed` est posé sur `.px-cr` SEULEMENT quand le script a pu la refermer une première fois — voir `[hidden]` plus bas. ══════════════════════════════════════════════════════════════════════════ */ /* ⚠️ Règle explicite : sans elle, `hidden` ne cache rien dès qu'une classe déclare un `display`. Piège déjà payé trois fois sur ce projet. */ .px-cr[hidden]{display:none} .px-cr{position:fixed;inset:0;z-index:95;display:flex; align-items:center;justify-content:center;padding:20px} .px-cr-voile{position:absolute;inset:0;background:rgba(4,7,10,.78); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} /* ⭐ CENTRÉE PAR LE CONTENEUR EN `flex`, jamais par `top:50%` + `transform` : le centrage en pourcentage se résout contre une hauteur qui n'est pas toujours celle qu'on croit, et la boîte remonte hors de l'écran. Payé le 2026-08-17 sur le panneau des cookies. */ .px-cr-boite{position:relative;width:min(520px,100%); max-height:min(86vh,720px);overflow:auto;overscroll-behavior:contain; /* ⚠️ Fond OPAQUE. `--px-surface-hi` est un dégradé semi-transparent, fait pour des blocs posés dans la page : sous un modal il laisse tout passer et le texte devient illisible. Même leçon que le panneau des cookies. */ background:#0E141B;border:1px solid var(--px-rule);border-radius:var(--px-r); box-shadow:0 30px 80px -28px rgba(0,0,0,.9); /* ⚠️ `overflow:hidden` sur le parent ferait sauter le défilement ; c'est donc le filet qui est découpé par le rayon, via `inset` et le rayon repris. */ scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.24) rgba(255,255,255,.05)} /* ⚠️ LE FILET TIENT SA COULEUR PLUS LONGTEMPS QU'UN SIMPLE DÉGRADÉ À DEUX ARRÊTS. En partant du cyan pour aller au transparent, l'extinction commence immédiatement et le trait paraît s'arrêter au tiers de la boîte — remarque de Thomas. Le cyan est donc tenu à pleine intensité jusqu'à 45 %, puis meurt jusqu'à 92 %. Il ne va pas jusqu'au bord : la règle de la maison est que la couleur arrive par un bord et S'ÉTEINT, elle ne souligne pas. */ .px-cr-boite::before{content:'';position:absolute;inset:0 0 auto;height:3px; border-radius:var(--px-r) var(--px-r) 0 0; background:linear-gradient(90deg,var(--px-cy) 0%,var(--px-cy) 45%,rgba(25,200,230,0) 92%)} /* ⛔⛔ LA PLACE DU BOUTON « FERMER » EST RÉSERVÉE — sans ça un titre long lui passe DESSOUS. « Fermer » est en `position:absolute`, il ne pousse donc rien et n'apparaît dans aucun calcul de largeur. Mesuré le 2026-08-21 à 320 px, avec le titre de Thomas « Nous sommes à votre écoute » : le texte finissait à 261 px et le bouton commençait à 250 — 11 px de recouvrement. Invisible à 375, où l'ancien « Une question ? » avait toujours tenu. ⚠️ 74 px = la largeur du bouton et son écart au bord. Le titre se replie maintenant sur deux lignes au lieu de passer dessous. ⚠️ Se mesure sur l'ÉTENDUE DU TEXTE (`Range.getClientRects`) et non sur la boîte du `

` : celle-ci fait toute la largeur et ne dit rien du recouvrement. Ma première mesure s'y est trompée. */ .px-cr-boite>.px-lbl{margin:26px 30px 0;padding-right:74px} .px-cr-texte{margin:10px 30px 0;font-size:13.5px;line-height:1.55;color:var(--px-ink-2)} .px-cr-texte a{color:var(--px-cy);text-decoration:underline;text-underline-offset:3px} .px-cr-erreur{margin:16px 30px -6px;padding:11px 14px;border-radius:var(--px-r-sm); font-size:13px;color:var(--px-ink); background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.4)} /* Le formulaire garde le rembourrage de `.px-form` ; on annule seulement le haut, la boîte portant déjà son titre. */ .px-cr .px-form{padding-top:20px} .px-cr-fermer{position:absolute;top:12px;right:14px;z-index:2; font-family:var(--f-texte);font-size:12.5px;color:var(--px-ink-3); background:none;border:0;cursor:pointer;padding:6px 8px;border-radius:var(--px-r-sm)} .px-cr-fermer:hover{color:var(--px-ink);background:rgba(255,255,255,.07)} /* ⭐ LA PAGE NE DÉFILE PLUS DERRIÈRE, et ici c'est propre : le script pose une classe sur ``. Pas besoin du `:has()` sur un style en ligne qu'il a fallu employer pour le panneau des cookies, dont on ne maîtrise pas le balisage. */ /* ⚠️ L'ÉCRAN DE REMERCIEMENT PORTE SON PROPRE REMBOURRAGE. L'état « formulaire » tient le sien de `.px-form` ; sans cette règle, le texte de fin se colle au bord inférieur de la boîte et l'écran paraît inachevé. Repéré par Thomas le 2026-08-17. */ /* ⛔ UN SEUL « FERMER » SUR L'ÉCRAN DE FIN. En ajoutant le bouton du bas pour décoller le texte du bord, j'avais laissé celui du coin : deux fois la même action sur le même écran, dont une qui flottait sans alignement. Repéré par Thomas. Le bouton du coin reste sur l'état « formulaire », où il est la seule sortie possible. ⚠️ `:has()` — le motif est déjà celui du rappel de prix de `/demarrer/`. */ .px-cr-boite:has(.px-cr-recu) .px-cr-fermer{display:none} .px-cr-recu{padding:28px 30px 30px} .px-cr-recu .px-lbl{margin:0} .px-cr-recu .px-cr-texte{margin:12px 0 0} .px-cr-recu .px-btn{margin-top:22px} /* Le compteur de caractères, dans le libellé. ⚠️ `margin-left:auto` le pousse à droite du libellé, qui est déjà en `flex` — pas besoin d'une rangée à lui. */ .px-cr-compteur{margin-left:auto;font-size:11.5px;font-weight:500; letter-spacing:0;text-transform:none;color:var(--px-ink-4);transition:color .16s} .px-cr-compteur-bas{color:var(--px-cy)} html.px-cr-ouvert{overflow:hidden} /* ══════════════════════════════════════════════════════════════════════════ LE PANNEAU DE CONTACT, RÉCHAUFFÉ — et son bouton flottant (2026-08-21) Retour de départ de Thomas : le site déballe son argumentaire sans jamais proposer de marche basse. Sur seize appels à l'action, quatorze demandaient de payer ou de bloquer un créneau. Le panneau existait déjà mais restait froid — « il fonctionne, mais c'est froid, sombre ». ⭐ Ce qui l'a réchauffé n'est PAS la teinte : la version blanche a été essayée et écartée. C'est ce que la fenêtre DEMANDE — deux champs au lieu de quatre — et le fait qu'elle ait une source de lumière. ══════════════════════════════════════════════════════════════════════════ */ /* ── LE BOUTON FLOTTANT ───────────────────────────────────────────────── ⚠️ z-index 70 : au-dessus du contenu, SOUS le bandeau cookies (80) et sous la pop-up (95). Mesuré — au-dessus, il couvrirait « Tout accepter ». ⚠️ Le rayon est celui de la maison (`--px-r-sm`), pas une pastille : Thomas l'a relevé, tous les `.px-btn` du site sont à 11 px. */ .px-flot{position:fixed;right:24px;bottom:24px;z-index:70; display:inline-flex;align-items:center;gap:10px; font-family:var(--f-texte);font-size:14px;font-weight:700; padding:14px 20px;border-radius:var(--px-r-sm);border:0;cursor:pointer; background:var(--px-cy);color:#fff;text-decoration:none; box-shadow:0 14px 34px -12px rgba(25,200,230,.85); opacity:0;transform:translateY(14px);pointer-events:none; transition:opacity .35s ease,transform .35s ease,background .2s ease} .px-flot.px-flot-on{opacity:1;transform:none;pointer-events:auto} /* ⛔ PAS DE PASTILLE SUR UN ARTICLE, TANT QUE SA COLONNE EST À CÔTÉ DU TEXTE. L'encart « Voir Prism » y porte déjà « Demander des renseignements » : les deux à l'écran en même temps, c'est la même proposition faite deux fois. Demande de Thomas le 2026-08-21. ⚠️ 1081 px n'est pas un chiffre rond choisi au hasard : c'est exactement là que `.px-acols` cesse d'empiler la colonne sous le texte. En dessous, l'encart part tout en bas de l'article et la pastille redevient utile. */ @media(min-width:1081px){ .single-post .px-flot{display:none} } .px-flot:hover{background:#12B4D0;color:#fff} .px-flot svg{width:19px;height:19px;flex:0 0 auto} /* ⚠️ Sous 560 px : le rond seul. Même seuil que la pop-up, qui bascule elle aussi en feuille — un seul point de rupture pour les deux. */ @media(max-width:560px){ .px-flot{right:16px;bottom:16px;width:56px;height:56px;padding:0; justify-content:center;gap:0;border-radius:16px} .px-flot .px-flot-txt{display:none} .px-flot svg{width:23px;height:23px} } /* ── LE PANNEAU SE POSE DANS L'AXE DU BOUTON ─────────────────────────── Il était centré à l'écran. Ancré en bas à droite, il donne la sensation d'un panneau de discussion qui sort du bouton — sans en promettre le fonctionnement, ce qui serait la même tromperie que « Réserver une démo » qui ne réserve rien. ⚠️ UNE SEULE GÉOMÉTRIE POUR TOUS LES POINTS D'ENTRÉE. La pop-up s'ouvre depuis onze liens ; deux comportements pour un même dialogue se paient toujours plus tard. ⚠️ Au-dessus de 560 px seulement : en dessous elle est DÉJÀ une feuille qui monte du bas, ce qui est la bonne convention sur téléphone. */ @media(min-width:561px){ .px-cr{align-items:flex-end;justify-content:flex-end;padding:0 24px 24px} } /* ── LE VOILE S'ADOUCIT ──────────────────────────────────────────────── 78 % éteignait la page. À 45 % le panneau se détache sans qu'on ait l'impression d'avoir coupé la lumière. */ .px-cr-voile{background:rgba(4,7,10,.45)} /* ── LA SURFACE PREND DU RELIEF ──────────────────────────────────────── Deux halos très faibles donnent une source de lumière au panneau au lieu d'un aplat : un blanc qui entre par le coin haut gauche, un cyan qui descend du coin haut droit. ⛔⛔ LA COULEUR PLEINE RESTE EN DERNIÈRE COUCHE. Les dégradés sont translucides ; sans fond opaque dessous, le texte redevient illisible — la leçon déjà payée sur le panneau des cookies. Ne jamais retirer `#17212C`. */ .px-cr-boite{width:min(440px,100%); background: radial-gradient(130% 95% at 8% -12%, rgba(255,255,255,.085), rgba(255,255,255,0) 58%), radial-gradient(100% 80% at 104% -6%, rgba(25,200,230,.11), rgba(25,200,230,0) 62%), #17212C; border-color:rgba(255,255,255,.14);border-radius:20px} .px-cr-boite .px-form input, .px-cr-boite .px-form textarea{ background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 42%),#101923; border-color:rgba(255,255,255,.15);color:var(--px-ink)} .px-cr-boite .px-form input::placeholder, .px-cr-boite .px-form textarea::placeholder{color:#6E7A88} .px-cr-boite .px-form input:focus, .px-cr-boite .px-form textarea:focus{ border-color:var(--px-cy);box-shadow:0 0 0 3px rgba(25,200,230,.16)} .px-cr-boite .px-form label{color:var(--px-ink)} .px-cr-texte{color:#C6D0DC} /* Une grande boîte vide réclame un long message ; une boîte courte invite à une question. */ .px-cr-boite .px-form textarea{min-height:96px} /* ── LE TITRE ET SA VIGNETTE ─────────────────────────────────────────── ⚠️ Le titre quitte le régime `.px-lbl` : plus de capitales, plus d'espacement de lettres. La police de titre est dessinée pour des mots, pas pour des lettres écartées. ⚠️ Le tiret du `.px-lbl` disparaît : vignette, tiret puis texte faisaient trois départs pour une seule ligne. */ .px-cr-boite>.px-cr-titre{display:flex;align-items:center;gap:10px; font-family:var(--f-titre);font-size:13px;font-weight:700; letter-spacing:-.005em;text-transform:none;color:var(--px-ink)} .px-cr-boite>.px-cr-titre::before{display:none} /* ⚠️ LE « P » EST BLANC ET SANS OMBRE — l'ombre a été écartée par Thomas. Mesuré sur le dégradé : du blanc fait 2,01 côté cyan, 3,89 côté violet. La vignette est décorative (`aria-hidden`), le seuil de texte ne s'y applique pas, mais la lettre reste douce côté cyan. ⛔ Si elle gêne un jour, la sortie est d'ASSOMBRIR LE DÉGRADÉ — pas de remettre une ombre, qui a été refusée. */ .px-vignette{flex:0 0 auto;width:26px;height:26px;border-radius:999px; display:grid;place-items:center; font:800 13px/1 var(--f-titre);color:#fff;letter-spacing:0; background:linear-gradient(140deg,var(--px-cy),#7C6BFF); box-shadow:0 0 0 1px rgba(255,255,255,.16),0 6px 16px -6px rgba(25,200,230,.7)} /* ── LE COMPTEUR SE TAIT ─────────────────────────────────────────────── ⛔⛔ LE MASQUAGE EST CONDITIONNÉ À `.px-discret`, POSÉE PAR LE SCRIPT — et c'est essentiel. Sans script, ce libellé est la SEULE chose qui annonce le plafond de 1000 caractères ; le masquer en CSS pur l'aurait supprimé pour ceux qui n'ont pas de JavaScript, alors que c'est justement eux qui en ont besoin. Le PHP l'écrit dans le balisage pour cette raison. ⚠️ `visibility` et non `display` : la place reste réservée, sinon le libellé du champ sauterait au moment où le compteur apparaît. */ .px-cr-compteur.px-discret{visibility:hidden;opacity:0;transition:opacity .2s ease} .px-cr-compteur.px-discret.px-proche{visibility:visible;opacity:1} @media (max-width:560px){ .px-cr{padding:0;align-items:flex-end} /* ⛔ 92 vh NE LAISSAIT QUE 8 % DE VOILE VISIBLE — soit ~65 px sur un écran de 812. Retour de Thomas le 2026-08-20 : « ça prend toute la page, tout l'écran, on ne comprend pas que c'est une pop-up ». Il avait raison : une feuille qui touche presque le haut de l'écran ne se lit plus comme une feuille POSÉE SUR la page, mais comme la page elle-même. Et le clavier, qui montait aussitôt, effaçait le peu qui restait. ⭐ 84 vh laisse ~130 px de voile : assez pour qu'on voie la page derrière, donc pour comprendre qu'on est par-dessus et qu'on peut revenir. */ .px-cr-boite{width:100%;max-height:74vh; border-radius:var(--px-r) var(--px-r) 0 0} /* ⭐ LE CONTENU EST RESSERRÉ POUR QUE LA FEUILLE TIENNE SANS DÉFILER — et c'est ce qui compte, plus que la hauteur elle-même. Un premier essai à 62 vh atteignait bien la cible, mais le contenu débordait de 110 px : le BOUTON D'ENVOI passait sous la ligne de flottaison. Une pop-up plus courte dont on ne voit plus le bouton est un moins bon marché. ⭐ Resserrée plutôt que rognée : 508 px de contenu pour 510 de boîte, tout est visible jusqu'au bouton. Sur un iPhone, plus haut que le banc d'essai, ça tombe autour de 65 % de l'écran. `74vh` n'est qu'un plafond de sûreté, pas la hauteur réelle. */ .px-cr-boite>.px-lbl{margin-inline:22px;margin-top:20px} .px-cr-texte,.px-cr-erreur{margin-inline:22px} .px-cr-texte{margin-top:8px;font-size:13px;line-height:1.5} .px-cr .px-form{padding-top:14px;padding-bottom:18px} .px-cr .px-form .px-champ{margin-bottom:9px} .px-cr .px-form textarea{min-height:70px} /* ⭐ PRÉNOM ET NOM RESTENT CÔTE À CÔTE — demande de Thomas, 2026-08-20. Le balisage utilisait DÉJÀ `.px-duo` ; c'est une règle générale du site qui repliait tous les duos sur une colonne sous 560 px. On la défait ici seulement : deux prénoms tiennent très bien dans 133 px chacun (mesuré à 320 px, le pire cas), et la rangée gagnée raccourcit la feuille, donc laisse voir davantage la page derrière. ⚠️ Le sélecteur reprend `.px-cr` pour peser (0,3,0) contre les (0,2,0) de la règle générale — sans ça il perdrait, en silence. */ .px-cr .px-form .px-duo{grid-template-columns:1fr 1fr} }