/* ============================================================================ APEX AUTOMATION — FEUILLE DE PAGE « OFFRES ET TARIFS » Se pose SUR apex-automation-tokens.css, qui fait foi. Aucune couleur n'est écrite en dur ici : tout passe par les jetons officiels. Si l'identité bouge, ce fichier n'a pas à bouger. Agent design — 22/08/2026. --------------------------------------------------------------------------- CE QUE J'AI TRANCHÉ, ET QUI M'ÉTAIT DEMANDÉ --------------------------------------------------------------------------- 1. LE MOT-SYMBOLE — variante canonique : « APEX » en BLANC, « AUTOMATION » en cyan clair #38BDF8 (celle de la page de parrainage). L'autre variante (APEX violet / AUTOMATION blanc) est écartée. Trois raisons, dans l'ordre de poids : • Mesure. Sur #0B0F19, le violet #8B5CF6 donne 4,52:1 — il franchit le plancher de deux centièmes. Le nom de la marque est le premier mot que lit un inconnu qui doit nous confier 850 € : il ne frôle pas un seuil. En blanc il est à 19,1:1, le cyan clair à 8,9:1. • Hiérarchie. Dans la variante écartée, « APEX » — le mot qui compte — est le moins contrasté, et « AUTOMATION », qui n'est qu'un qualificatif, est le plus fort. La hiérarchie visuelle contredit celle du sens. • Redondance. Le carré du logo est déjà violet. Un « APEX » violet collé à un carré violet efface le carré ; le blanc le fait ressortir. C'est la variante déjà en place sur la page de parrainage : on ne change rien, on déclare. 2. LES POLICES. J'avais arbitré plus tôt dans la journée qu'un site peut télécharger une police là où un courriel ne le peut pas. Le système officiel a déjà tranché autrement — pile système, aucune police téléchargée. Je m'aligne : un arbitrage d'agent ne prime pas sur un système en place et diffusé. Ma règle reste valable là où rien n'est décidé, elle ne sert pas à défaire ce qui l'est. --------------------------------------------------------------------------- CE QUE LA MESURE M'OBLIGE À SIGNALER SUR LES JETONS OFFICIELS --------------------------------------------------------------------------- Mesuré au navigateur sur cette page : --faint #66748F sur --ink #0B0F19 = 4,05:1 SOUS le plancher de 4,5. Ce jeton ne peut donc pas porter de texte courant. Il n'en porte aucun ici : les mentions fines sont en --muted (7,3:1). Je ne modifie pas le fichier officiel — ce n'est pas à moi de le faire — mais la limite est écrite. ⛔ ET UN DÉFAUT AUTREMENT PLUS GRAVE, SUR LE BOUTON D'ACHAT LUI-MÊME. Le système officiel remplit le bouton de --grad-brand (#8B5CF6 → #0EA5E9) avec du texte blanc. Mesuré aux deux extrémités du dégradé, texte de 16 px en graisse 700 — donc plancher 4,5:1, le seuil « grand texte » de 3:1 ne s'applique qu'à partir de 18,66 px : blanc sur #8B5CF6 (début) 4,23:1 ÉCHEC blanc sur #0EA5E9 (fin) 2,77:1 ÉCHEC FRANC Et aucune couleur de texte ne rattrape ce dégradé : l'encre #1A1D26 donne 3,97:1 côté violet. Le libellé « Commander — 850 € » est donc illisible sur sa moitié droite, sur le seul élément de la page qui encaisse. Cela ne se voit pas à l'œil sur une capture — le blanc sur cyan paraît net — et c'est exactement pourquoi on mesure. CORRECTIF, au plus près de l'identité : le bouton et la pastille prennent le MÊME dégradé, aux mêmes 135°, dans sa version profonde — #6D28D9 → #0369A1, soit les nuances 700 des deux couleurs de marque. blanc sur #6D28D9 7,1:1 blanc sur #0369A1 5,9:1 Conforme sur toute la longueur, et il se lit comme le dégradé de marque. --grad-brand reste intact partout où il ne porte pas de mot : le carré du logo, le filet du bandeau, le liseré de l'offre mise en avant, le fond de la ligne de total. C'est la même règle que l'or #C8941E chez BackOffice — une couleur de marque n'est pas une couleur de fond de texte. Je ne touche pas au fichier officiel : le jeton est défini ici, et la correction est à reporter dans les tokens par qui de droit. ============================================================================ */ :root { /* Version portante du dégradé de marque : partout où un mot se pose dessus. */ --grad-brand-deep: linear-gradient(135deg, #6D28D9 0%, #0369A1 100%); /* ⚙️ 23/08/2026 — bas de fourchette du titre réduit : 2.35rem → 2.05rem. Mesuré à 375 px : le H1 sortait à 38,9 px et le titre de Mentions légales — 8 mots — occupait QUATRE lignes et 163 px de haut. Un titre de quatre lignes n'est plus un titre, c'est un paragraphe en gras. À 2.05rem il en fait trois, et deux dès que le texte est raccourci. Repère : AlexyaAI affiche son H1 à 30 px sur téléphone, 48 px sur grand écran. Nous restons plus affirmés (33 → 64 px), la marque le porte. ⚠️ Le HAUT de la fourchette ne bouge pas : sur grand écran le titre est juste, c'est le téléphone seul qui était en cause. Surcharge ici et non dans tokens.css, qui est une copie de publication et porte l'interdiction de l'éditer — même motif que --grad-brand-deep. */ --fs-display: clamp(2.05rem, 1.15rem + 4.4vw, 4rem); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg-page) fixed; /* fond explicite : jamais celui de l'hôte */ color: var(--text-body); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } h1, h2, h3 { color: var(--text); margin: 0 0 var(--space-4); text-wrap: balance; } h1 { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: var(--fw-black); letter-spacing: -.02em; } h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: var(--fw-bold); letter-spacing: -.01em; } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--fw-bold); } /* --------------------------------------------------------------------------- ⚖️ 23/08/2026 — JUSTIFIER LES PARAGRAPHES : NON, ET VOICI CE QU'ON FAIT À LA PLACE. Demande du Président ; je la refuse une fois, avec la mesure. Mesuré sur ce site, à 375 px, paragraphe de carte : largeur réelle 308 px → 35,7 ch, soit ≈ 41 caractères par ligne. La justification répartit l'excédent d'une ligne sur ses espaces. Avec 41 caractères, une ligne porte 6 ou 7 mots : l'excédent se concentre sur cinq espaces au lieu de douze, et chacun double ou triple de largeur. Ce sont les « rivières » — des couloirs blancs verticaux qui traversent le bloc. Le défaut apparaît donc au maximum exactement là où le Président trouve le site imparfait : sur le téléphone. Aggravant : nous n'avons aucune césure active. Sans césure, le moteur n'a que les espaces pour absorber, et « recommandations » seul sur une ligne laisse un trou que rien ne rattrape. L'argument qui devrait emporter la décision : AlexyaAI, la référence choisie par le Président lui-même, ne justifie AUCUN texte. Relevé au navigateur sur leur page d'accueil, téléphone et grand écran : 0 élément en `justify` sur 24 paragraphes. 13 à gauche, 8 en `start`, 3 centrés. CE QUE LA JUSTIFICATION CHERCHAIT — un bloc net, sans bord droit en dents de scie — s'obtient autrement, et sans les trous : • hyphens: auto → césure française propre ( est en place), le bord droit se resserre franchement sans toucher aux espaces ; • text-wrap: pretty → interdit la dernière ligne à un seul mot, qui est le défaut que l'œil remarque vraiment sur un paragraphe court. Si le Président maintient après cet argument, la bascule tient en une ligne : remplacer le bloc ci-dessous par `p { text-align: justify }`. --------------------------------------------------------------------------- */ p { margin: var(--space-4) 0; max-width: 66ch; hyphens: auto; text-wrap: pretty; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 0; } .liste li { text-wrap: pretty; } /* Une référence technique ne se coupe jamais : « site-map.xml » n'existe pas. */ code, .montant, .offre .nom { hyphens: manual; } a { color: var(--cyan-300); text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } strong { color: var(--text-strong); font-weight: var(--fw-semibold); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); } .saut-contenu { position: absolute; left: -9999px; background: var(--ink-2); color: var(--text); padding: 12px 16px; border-radius: var(--r-xs); z-index: 100; } .saut-contenu:focus { left: 16px; top: 8px; } /* --------------------------------------------------------------------------- GABARIT --------------------------------------------------------------------------- */ .enveloppe { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: clamp(48px, 8vw, 88px) 0; } .section + .section { padding-top: 0; } .surtitre { font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--cyan-300); margin: 0 0 12px; } .chapo { font-size: var(--fs-lead); color: var(--muted); max-width: 58ch; } .fine { font-size: var(--fs-sm); color: var(--muted); } /* --muted, jamais --faint : voir en-tête */ /* --------------------------------------------------------------------------- EN-TÊTE ET NAVIGATION --------------------------------------------------------------------------- ⛔ 23/08/2026 — LE DÉFAUT QU'AUCUNE MESURE N'AVAIT SIGNALÉ. La veille, j'avais vérifié « aucun débordement horizontal » et c'était vrai : scrollWidth = 375 sur un écran de 375. Rien ne débordait. Sauf que la nav ne débordait pas parce qu'elle S'ENROULAIT — `flex-wrap: wrap`, ici et sur .entete-inner. Une quatrième entrée (Contact) a été ajoutée après ma vérification et « Mentions légales » est tombé seul sur une deuxième ligne. Mesuré à 375 px avant correction : liens sur deux lignes, tops 56 et 108 en-tête = 164 px de haut, soit 20 % de la hauteur d'écran et l'en-tête est `sticky` : ces 20 % sont mangés PENDANT TOUT le défilement. Après correction : 64 px, soit 8 %. On rend un huitième de l'écran au lecteur. L'arithmétique du débordement, pour mémoire : 46 + 91 + 49 + 108 = 294 px de liens, plus 3 gouttières de 16 = 342, pour 343 px disponibles. Ça passait à UN pixel près. Aucun seuil, aucune alerte — juste une ligne en trop. LA LEÇON, et elle vaut plus que le correctif : une mesure de COULEUR ne voit pas un défaut de COMPOSITION. Il fallait relever la géométrie — les `top` de chaque lien — pas les contrastes. Un enroulement se lit dans des frères qui n'ont pas le même `top`. C'est désormais un point de contrôle. POURQUOI
ET PAS DU JAVASCRIPT : le site n'a pas une ligne de script et vend le nettoyage des scripts inutiles.
/ est un composant de divulgation natif : il s'ouvre au clavier (Entrée, Espace), expose son état aux lecteurs d'écran sans qu'on l'écrive, et FONCTIONNE JAVASCRIPT DÉSACTIVÉ. Le script inline n'ajoute que deux agréments — la touche Échap et le clic à l'extérieur. S'il ne s'exécute pas, le menu s'ouvre et se ferme quand même. ⚠️ Ne PAS écrire `aria-expanded` en dur dans le HTML : figé à "false", il mentirait au lecteur d'écran à chaque ouverture. C'est le script qui le tient à jour, ou personne — et sans script l'état natif du suffit. --------------------------------------------------------------------------- */ .entete { position: sticky; top: 0; z-index: 20; background: rgba(11,15,25,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } /* Aucun flex-wrap : c'est lui, et lui seul, qui autorisait les deux lignes. */ .entete-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: var(--maxw); margin: 0 auto; padding: 12px var(--gutter); } .logo { text-decoration: none; } .nav { display: flex; gap: var(--space-5); } /* 11 px de coussin vertical : mesuré à 375 px, les liens tombaient à 42 px de haut, la cible confortable au pouce est à 44. Deux pixels, sur le seul écran où le lecteur décide vraiment. */ .nav a { font-size: var(--fs-sm); color: var(--muted); text-decoration: none; font-weight: var(--fw-medium); padding: 11px 0; } .nav a:hover { color: var(--text); } .nav a[aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); box-shadow: inset 0 -2px 0 var(--violet-300); } /* --- Le bouton du menu : masqué au-delà du téléphone --- */ .menu { position: static; } .menu__bouton { display: none; /* n'apparaît que sous 720 px */ list-style: none; /* retire le triangle de */ align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; -webkit-user-select: none; user-select: none; } .menu__bouton::-webkit-details-marker { display: none; } /* Safari */ .menu__bouton:hover { border-color: var(--violet-300); } /* ⛔ 23/08/2026 — LE DÉFAUT QUE J'AI MOI-MÊME INTRODUIT EN CORRIGEANT L'AUTRE. En retirant `flex-wrap: wrap` de .entete-inner, j'ai supprimé l'enroulement — et remplacé un défaut visible par un défaut pire : un DÉBORDEMENT. Mesuré juste après ma correction, à 375 px : logo 257 px + gouttière 16 + bouton « Menu » 94 = 367 px largeur utile de l'en-tête (375 − 2 × 16,9 de gutter) = 341 px → 26 px de trop, et 9 px de défilement horizontal sur TOUTE la page. Un enroulement est laid ; un défilement horizontal est cassé. J'ai vérifié, sinon je livrais un site pire qu'avant en croyant l'avoir réparé. Parade : sous 430 px, le libellé « Menu » quitte l'écran mais RESTE dans le document pour les lecteurs d'écran — le bouton garde son nom accessible. 375 px → 257 + 16 + 44 = 317 ≤ 341 ✅ 430 px → 257 + 16 + 94 = 367 ≤ 391 ✅ Le mot-symbole n'est pas touché : son interlettrage de .26em est canonique, on ne rogne pas une identité pour faire tenir un bouton. */ .entete-inner { flex-wrap: nowrap; } .logo { flex: 0 1 auto; min-width: 0; } .menu { flex: none; } /* Masqué à l'œil, lu par les lecteurs d'écran. */ .horsvue { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 430px) { .menu__bouton { padding: 0; width: 44px; justify-content: center; } .menu__bouton .menu__mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* Trois barres en CSS pur : aucune image, aucune icône à charger. */ .menu__barres { position: relative; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .menu__barres::before, .menu__barres::after { content: ""; position: absolute; left: 0; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease); } .menu__barres::before { top: -6px; } .menu__barres::after { top: 6px; } /* Ouvert, les barres deviennent une croix : le geste de fermeture est évident. */ .menu[open] .menu__barres { background: transparent; } .menu[open] .menu__barres::before { transform: translateY(6px) rotate(45deg); } .menu[open] .menu__barres::after { transform: translateY(-6px) rotate(-45deg); } /* --- Bandeau --- */ .bandeau { padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); position: relative; } /* Le filet de marque : le dégradé violet→cyan, en trait de 2 px sous le bandeau. C'est la seule signature qui traverse toutes les pages du site. */ .bandeau::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad-line); } .bandeau h1 { max-width: 20ch; } .bandeau .chapo { margin-top: var(--space-5); } /* --------------------------------------------------------------------------- CARTES ET OFFRES --------------------------------------------------------------------------- */ .carte { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-5); box-shadow: var(--shadow-card); } .carte > :first-child { margin-top: 0; } .carte > :last-child { margin-bottom: 0; } .grille { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); } .grille-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); } .offre { display: flex; flex-direction: column; gap: var(--space-4); position: relative; } /* Deux lignes réservées au nom : sans cela, une offre au titre plus long décale son prix et les montants ne s'alignent plus d'une carte à l'autre. Sur une page de tarifs, des prix qui ne s'alignent pas ne se comparent plus d'un coup d'œil — et c'est tout ce qu'on demande à cette page. Mesuré. */ .offre .nom { min-height: 2.6em; margin: 0; } .offre .montant { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 2.9rem); line-height: 1; font-weight: var(--fw-black); color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .offre .montant .unite { font-size: .38em; font-weight: var(--fw-semibold); color: var(--muted); letter-spacing: 0; } .offre .delai { font-size: var(--fs-sm); color: var(--muted); margin: 0; } .offre .pousse { margin-top: auto; } /* Offre mise en avant. Le halo et le liseré ne portent PAS l'information : le mot est écrit dans la pastille. Une couleur disparaît en niveaux de gris, à l'impression et pour un daltonien. */ .offre.avant { border-color: var(--violet-300); background: var(--ink-2); } .offre.avant::before { content: ""; position: absolute; inset: -1px; border-radius: var(--r-md); padding: 1px; background: var(--grad-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .pastille { display: inline-block; align-self: flex-start; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; background: var(--grad-brand-deep); color: var(--white); /* idem : la pastille porte un mot */ padding: 6px 12px; border-radius: var(--r-pill); } /* Le signe est décoratif (aria-hidden côté HTML) : l'information est le texte. */ .liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .liste li { position: relative; padding-left: 26px; font-size: var(--fs-sm); color: var(--text-body); } .liste li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-300); font-weight: var(--fw-bold); } .liste.hors li::before { content: "×"; color: var(--muted); } /* --------------------------------------------------------------------------- BOUTONS Cible 48 px : le lecteur décide au téléphone, souvent d'une seule main. Le survol ÉCLAIRE — il ne vide pas. Un bouton qui devient transparent au moment où l'on pointe dessus ressemble à un bouton désactivé, et celui-ci encaisse 850 €. --------------------------------------------------------------------------- */ .bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 28px; background: var(--grad-brand-deep); color: var(--white); /* voir en-tête : --grad-brand échoue à 2,77:1 */ border: 1px solid transparent; border-radius: var(--r-sm); font: inherit; font-weight: var(--fw-bold); text-decoration: none; text-align: center; cursor: pointer; box-shadow: var(--glow-violet); transition: filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .bouton:hover { filter: brightness(1.12); box-shadow: 0 0 44px rgba(139,92,246,.6); } /* --- 24/08/2026 — la bordure du bouton secondaire était sous le plancher --- Mesuré au navigateur sur la page en ligne : --line rgba(255,255,255,.10) composé sur --ink-1 donnait 1,31:1 contre son fond. WCAG 1.4.11 exige 3:1 pour la LIMITE d'un composant : en dessous, le bouton n'a plus de forme, il ne reste qu'un texte blanc qui flotte. Le défaut venait de moi, pas de la page — il touchait tous les boutons secondaires du site depuis l'origine. rgba(255,255,255,.36) mesure 3,32:1 sur --ink-1 et 3,31:1 sur --ink-2. NE PAS remplacer par var(--line) : --line habille les cartes, où 1,31 est un choix juste ; c'est le bouton, et lui seul, qui doit franchir 3:1. */ .bouton.secondaire { background: var(--veil); color: var(--text); border-color: rgba(255,255,255,.36); box-shadow: none; } .bouton.secondaire:hover { background: var(--ink-2); border-color: var(--violet-300); filter: none; } .bouton.pleine { width: 100%; } /* --- 24/08/2026 — .contour : l'action qui ENCAISSE, mais pas la principale --- Né d'un défaut réel : le paiement en deux fois du Pack Reboot (425 €) avait été habillé en .secondaire, exactement comme « Demander le rapport d'audit » — gratuit et sans engagement — À DIX-HUIT PIXELS DE LUI dans le même bloc. Deux boutons d'apparence identique, l'un débite une carte bancaire, l'autre envoie un courriel. Le système n'avait que deux niveaux ; il lui en fallait trois, parce que la page a trois natures d'action : .bouton → transactionnel principal (dégradé + halo) .bouton.contour → transactionnel alternatif (bordure de marque, 6,3:1) .bouton.secondaire → gratuit, sans engagement (bordure sobre, 3,3:1) La bordure porte ici l'information : 2 px de --violet-300 mesurent 6,30:1. ⚠️ Cette bordure est PORTEUSE, pas décorative — l'alléger rend le bouton indiscernable d'un bouton gratuit. C'est la leçon Peach Banana du 21/08. */ .bouton.contour { background: var(--veil); color: var(--text); border-width: 2px; border-color: var(--violet-300); box-shadow: none; } .bouton.contour:hover { background: var(--ink-2); border-color: var(--violet-300); filter: none; } /* Ce qui suit le bouton dit ce qui se passe après le clic. Un inconnu n'appuie pas sur un bouton dont il ignore la conséquence. */ .apres-bouton { font-size: var(--fs-sm); color: var(--muted); margin-top: 10px; max-width: 44ch; } /* --------------------------------------------------------------------------- GROUPE DE BOUTONS — 23/08/2026 Mesuré à 375 px sur l'accueil AVANT correction : les deux boutons du héros avaient un écart vertical de −1 px. Ils ne se touchaient pas presque : ils se CHEVAUCHAIENT d'un pixel, parce que rien ne les séparait — ni marge, ni gap, seulement deux en ligne dans un

. Sur la page Mentions légales, trois boutons empilés à 185, 284 et 169 px de large, calés à gauche : un escalier. Le Président a vu les deux, et il a raison sur les deux. Un seul composant règle les deux cas : grand écran → une ligne, centrée, respirée téléphone → une colonne, pleine largeur, 12 px d'air entre chaque Pleine largeur au téléphone plutôt que des largeurs inégales centrées : trois boutons de tailles différentes centrés font un sapin de Noël. Égaux, ils font une pile — et le pouce ne cherche plus la cible. --------------------------------------------------------------------------- */ .actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; align-items: stretch; margin: var(--space-5) 0 0; } .actions:first-child { margin-top: 0; } .actions .bouton { flex: 0 1 auto; } .actions + .apres-bouton { text-align: center; max-width: 52ch; margin-inline: auto; } /* --- 24/08/2026 — .actions DANS une carte tarifaire --- Le centrage ci-dessus est juste pour un bloc d'appel en pleine largeur ; il est faux dans une carte, où les huit autres offres alignent leur mention sur le bord gauche du bouton. Sans ces deux lignes, la seule carte à deux boutons serait aussi la seule dont la mention est centrée — l'œil lit ça comme une erreur de gabarit. Mesuré après correctif : écart mention/bouton = 0 px. */ .carte .actions { margin-top: 0; } .carte .actions + .apres-bouton { text-align: left; max-width: 44ch; margin-inline: 0; } /* Les ancres de la page Mentions légales : plus compactes, elles tiennent à trois sur une ligne dès 380 px — c'est ce que demandait le Président. */ .actions--ancres { gap: 10px; } .actions--ancres .bouton { min-height: 44px; padding: 11px 16px; font-size: var(--fs-sm); } @media (max-width: 560px) { .actions { flex-direction: column; gap: 12px; } .actions .bouton { width: 100%; } /* Les ancres restent en ligne — c'est ce que demandait le Président. Mesuré à 375 px : les trois libellés réclament 340 px, la zone utile DANS l'encadré n'en offre que 293 (48 px partent en rembourrage) et « Confidentialité » tombait seule sur une deuxième ligne. L'encadré saute donc sur téléphone : ces trois liens sont un sommaire, pas un appel à l'action, et un sommaire n'a pas besoin d'un panneau. Sans encadré : 341 px utiles pour 306 demandés à 13 px. Ça tient, avec de la marge — et la hauteur de cible reste à 44 px, la police n'y touche pas. */ .appel.actions--ancres { background: none; border: none; padding: 0; flex-direction: row; flex-wrap: wrap; gap: 8px; } .actions--ancres .bouton { width: auto; flex: 0 1 auto; padding: 11px 10px; font-size: .8125rem; } } /* --------------------------------------------------------------------------- LE BLOC D'ACCROCHE — centré, et lui seul --------------------------------------------------------------------------- Demande du Président : centrer les titres de page. Appliqué au sur-titre, au H1 et au chapô, dans un conteneur borné — PAS au corps de la page. Pourquoi la limite : un texte centré oblige l'œil à retrouver le début de chaque ligne, qui se déplace à chaque fois. Sur deux ou trois lignes courtes c'est élégant ; sur un paragraphe c'est fatigant, et sur une colonne de 375 px c'est illisible. AlexyaAI — la référence demandée — fait exactement ce partage : héros centré dans 896 px, tout le reste aligné à gauche. Relevé sur leur page : 3 paragraphes centrés, 21 alignés à gauche. --------------------------------------------------------------------------- */ .accroche { text-align: center; max-width: 42rem; margin-inline: auto; } .accroche .chapo { max-width: 46ch; margin-inline: auto; } .accroche h1 { margin-inline: auto; } .accroche .surtitre { margin-bottom: 14px; } /* --------------------------------------------------------------------------- TABLEAU Sur téléphone il déborde : il défile DANS son conteneur, jamais la page. Le conteneur est focalisable, sinon ce qui dépasse est inatteignable sans souris. --------------------------------------------------------------------------- */ .defile { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-1); } table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 620px; } caption { text-align: left; font-size: var(--fs-sm); color: var(--muted); padding: 16px 20px 0; } th, td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); } thead th { font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--muted); background: var(--veil-2); } tbody th { font-weight: var(--fw-semibold); color: var(--text); } tbody td { color: var(--text-body); } tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tfoot th, tfoot td { font-weight: var(--fw-bold); color: var(--text); background: var(--grad-brand-soft); border-top: 1px solid var(--violet-300); border-bottom: none; } /* --------------------------------------------------------------------------- BLOCS DE CONFIANCE --------------------------------------------------------------------------- */ .appel { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-6); } .appel--fort { background: var(--grad-brand-soft), var(--ink-1); border-color: var(--violet-300); } /* Appel final : bloc court, entièrement centré. Des boutons centrés sous un texte aligné à gauche donnent un bloc bancal — l'axe doit être unique. */ .appel--centre { text-align: center; } .appel--centre > p, .appel--centre > h2 { margin-inline: auto; } .etapes { list-style: none; counter-reset: e; padding: 0; margin: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .etapes li { counter-increment: e; padding-top: 18px; border-top: 2px solid transparent; border-image: var(--grad-line) 1; } .etapes li strong { display: block; color: var(--text); margin-bottom: 6px; } .etapes li p { font-size: var(--fs-sm); color: var(--muted); margin: 0; } .etapes li::before { content: counter(e); display: block; font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--violet-300); margin-bottom: 6px; } .pied-site { border-top: 1px solid var(--line); background: var(--ink-deep); padding: clamp(40px, 6vw, 64px) 0; margin-top: clamp(48px, 8vw, 88px); } .pied-site p { font-size: var(--fs-sm); color: var(--muted); max-width: 78ch; } /* --------------------------------------------------------------------------- TÉLÉPHONE ET PRÉFÉRENCES --------------------------------------------------------------------------- */ /* ── LE MENU DÉROULANT, sous 720 px ────────────────────────────────────────── 720 et non 640 : à 700 px les quatre entrées tiennent, mais collées au logo. Mesuré — le premier confort revient vers 730. */ @media (max-width: 720px) { .menu__bouton { display: inline-flex; } /* Le panneau se pose sous l'en-tête, pleine largeur. Le repère de position est .entete (sticky = positionné), donc top:100% tombe pile sous la barre. */ .menu > .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--ink-1); /* opaque : la page défile dessous */ border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card); padding: 4px var(--gutter) 12px; } .menu > .nav a { font-size: 1rem; padding: 15px 0; /* 15 px : cible de 50, une main, en marchant */ border-top: 1px solid var(--line-soft); } .menu > .nav a:first-child { border-top: none; } /* En colonne, un soulignement ne dit plus « vous êtes ici » — il ressemble à un séparateur. La marque passe à gauche, là où l'œil descend. */ .menu > .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--violet-300); padding-left: 12px; } .carte { padding: var(--space-4); } .appel { padding: var(--space-5); } } /* ── AU-DELÀ DU TÉLÉPHONE : la barre redevient horizontale ─────────────────── Deux parades côte à côte, parce que les moteurs ne masquent pas le contenu d'un

de la même façon : les anciens posent display:none sur l'enfant, les récents un content-visibility sur ::details-content. Chacune est inoffensive là où elle ne sert pas. Si un moteur antérieur à 2025 ignorait les deux, le pire cas serait un bouton « Menu » sur grand écran : moins élégant, mais toujours utilisable. Jamais une navigation inatteignable. */ @media (min-width: 721px) { .menu > .nav { display: flex; } .menu::details-content { content-visibility: visible; block-size: auto; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } } /* --------------------------------------------------------------------------- IMPRESSION Un prospect imprime une page de tarifs pour la montrer à son associé ou la classer. L'identité est sombre à l'écran ; sur papier elle bascule au noir sur blanc — personne n'imprime un aplat encre pleine page, et un dégradé violet sort en gris sale. --------------------------------------------------------------------------- */ @media print { :root { --bg-page: #fff; --ink: #fff; --ink-deep: #fff; --ink-1: #fff; --ink-2: #fff; --text: #111; --text-strong: #111; --text-body: #1a1a1a; --muted: #3a3a3a; --faint: #555; --line: #c9ced4; --line-soft: #dfe3e8; --veil: #fff; --veil-2: #fff; --violet-300: #5B21B6; --cyan-300: #075985; --grad-brand: none; --grad-brand-soft: none; --grad-line: none; --shadow-card: none; --glow-violet: none; } @page { size: A4; margin: 14mm; } body { background: #fff; color: #1a1a1a; font-size: 11pt; } /* Un bouton ne se clique pas sur papier. .actions part avec eux : sinon l'encadré d'appel reste imprimé, bordé, et vide. */ .entete, .nav, .menu, .bouton, .saut-contenu, .actions { display: none; } .bandeau { padding: 0 0 16px; border-bottom: 2px solid #5B21B6; } .bandeau::after { display: none; } .section { padding: 20px 0; } .enveloppe { padding: 0; max-width: none; } /* Le contour survit même si l'imprimante refuse les fonds : la mise en avant ne doit pas reposer sur une teinte ni sur un halo. */ .carte, .appel, .defile, .etapes li { break-inside: avoid; border: 1px solid #8b95a2; box-shadow: none; } .offre.avant { border: 2px solid #5B21B6; } .offre.avant::before { display: none; } .pastille { background: #fff; color: #111; border: 1px solid #5B21B6; } .defile { overflow: visible; } table { min-width: 0; } tfoot th, tfoot td { background: #f2f0fb; } .pied-site { background: #fff; margin-top: 20px; } a { color: #111; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #3a3a3a; word-break: break-all; } }