/* ============================================================================= QRcard — Design « minimaliste » (esprit Apple / Revolut) Beaucoup de blanc, un sans-serif net (Manrope + Inter), coins arrondis, boutons « pilule », un seul accent. Pas de dégradés criards. NB : les noms de classes sont volontairement stables (les vues en dépendent). ========================================================================== */ :root { /* ------------------------------------------------------------------ ⚠️ LE PAPIER EST CHAUD, PAS GRIS. (0.3.10, 03/08/2026) ------------------------------------------------------------------ `#F5F5F7` est le gris d'Apple : bleute, froid, parfaitement neutre. C'est excellent pour un systeme d'exploitation, et c'est exactement ce qui empeche ce site de ressembler a autre chose qu'un tableau de bord. Un lieu qui veut avoir l'air soigne n'est jamais gris-bleu : le papier d'un carton d'invitation, le marbre d'un hall, le lin d'une nappe tirent tous vers le chaud. Le decalage est minuscule — deux points de teinte — et c'est precisement ce qui fait qu'on le ressent sans le remarquer. ⚠️ NE PAS AUGMENTER LA SATURATION. Au-dela, on quitte le papier pour le beige, et le beige a l'air sale a cote du blanc pur des cartes. ------------------------------------------------------------------ */ --bg: #FFFFFF; --bg-2: #F7F5F2; /* papier chaud, remplace le gris froid #F5F5F7 */ --card: #FFFFFF; --ink: #0B0B0C; --ink-2: #1D1D1F; --soft: #6E6E73; /* texte secondaire */ --muted: #86868B; --line: #ECE8E3; /* filet chaud, accorde au papier */ --line-2: #DBD5CD; --accent: #2F54EB; /* bleu net, esprit Revolut */ --accent-ink:#1D3AC7; --accent-bg: #EAEEFE; --stamp: #D0463B; /* L'or des QR. Même valeur que le défaut de public/assets/js/app.js — si l'une change, l'autre doit suivre : le bouton « Espace membres » est censé reprendre exactement la couleur du code imprimé. */ --gold: #6C6347; --gold-dark: #554E38; --good: #0F7A50; --good-bg: #E7F5EE; --bad: #C4362B; --bad-bg: #FBEBEA; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --display: 'Manrope', 'Inter', -apple-system, sans-serif; /* Titres éditoriaux. Le sans-serif gras convenait à un outil ; il ne dit rien du soin qu'on met dans une carte de visite. Un serif fin sur les grands titres suffit à faire basculer la page du côté « objet soigné », sans rien changer au reste de l'identité : la marque, la navigation et les boutons restent en Manrope. Fraunges/Instrument Serif ont été écartés au profit de Fraunces pour sa graisse variable (un seul fichier couvre les titres et les sous-titres). */ --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --wrap: 1080px; --r: 12px; --r-lg: 20px; --r-pill: 980px; /* ------------------------------------------------------------------ DES OMBRES EN DEUX COUCHES, PAS UN HALO ------------------------------------------------------------------ Une ombre unique tres floue donne l'objet qui LEVITE — l'effet le plus reconnaissable des maquettes faites a la va-vite. Une ombre reelle a deux composantes : un contact serre et sombre juste sous l'objet, et une diffusion large et tres pale au-dela. C'est ce qui distingue une carte POSEE sur la page d'une carte qui flotte au-dessus. Les valeurs restent tres basses : on doit voir l'objet, pas son ombre. ------------------------------------------------------------------ */ --sh: 0 1px 2px rgba(28,25,23,.05), 0 12px 34px -10px rgba(28,25,23,.10); --sh-sm: 0 1px 2px rgba(28,25,23,.05), 0 4px 12px -4px rgba(28,25,23,.07); --sh-lift: 0 2px 4px rgba(28,25,23,.06), 0 18px 42px -12px rgba(28,25,23,.16); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, canvas { display: block; max-width: 100%; } a { color: var(--ink-2); text-decoration: none; } a:hover { color: var(--accent); } hr { border: 0; border-top: 1px solid var(--line); margin: 0; } /* Typographie Les grands titres (h1, h2) passent au serif : c'est ce qui donne le ton. Les h3 restent en sans-serif — à petite taille, le serif brouille la lecture, et l'alternance des deux familles crée justement la hiérarchie. Tailles réduites par rapport à la version précédente (h1 allait jusqu'à 4,5 rem) : un titre plus mesuré, plus d'air autour, ça se lit comme un carton d'invitation plutôt que comme une bannière. */ h1, h2, h3, h4 { color: var(--ink); margin: 0; letter-spacing: -0.02em; line-height: 1.06; } h1, h2 { font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; } h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); letter-spacing: -0.022em; line-height: 1.04; } h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.018em; line-height: 1.1; } h3, h4 { font-family: var(--display); } h3 { font-size: 1.16rem; font-weight: 600; letter-spacing: -0.01em; } p { margin: 0 0 1rem; } .lede { font-size: 1.14rem; line-height: 1.62; color: var(--soft); } /* Le sur-titre porte beaucoup du caractère « premium » : très petit, très espacé, en gris plutôt qu'en bleu vif — un accent qui crie perd sa valeur d'accent. */ .eyebrow { display: inline-block; font-family: var(--display); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; color: var(--muted); } .muted { color: var(--muted); } .small { font-size: 0.85rem; } /* Layout */ .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .section { padding: 92px 0; } .section-alt { background: var(--bg-2); } .section-tight { padding: 56px 0; } .grid { display: grid; gap: 36px; } .cols-2 { grid-template-columns: 1fr 1fr; } .cols-3 { grid-template-columns: repeat(3, 1fr); } .stack > * + * { margin-top: 1rem; } .text-center { text-align: center; } .divider { height: 1px; background: var(--line); margin: 26px 0; } /* Header public */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.8); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); } /* Le header a besoin d'un peu plus de largeur que le contenu (--wrap: 1080px) : avec 4 liens + sélecteur de langue + connexion + bouton, le libellé long « À quoi sert votre argent ? » (FR) faisait passer le nav à la ligne (26/07/2026). On élargit uniquement le conteneur du header, pas celui des sections de contenu, et on resserre un peu les espacements. */ .site-header .wrap { max-width: 1240px; } /* Ecarts resserres de 18 a 14 px le 03/08/2026 : voir le bloc « L'EN-TETE NE TENAIT PAS EN FRANCAIS » plus bas. Chaque pixel gagne ici est un pixel de moins a prendre sur la taille du texte. */ .site-header .bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 14px; } .brand { font-family: var(--display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.02em; display: inline-flex; flex-shrink: 0; } .brand .qr { color: var(--ink); } .brand .card { color: var(--accent); } .brand .dotcom { color: var(--muted); } .nav { display: flex; align-items: center; gap: 14px; } .nav a { font-size: 0.88rem; color: var(--soft); white-space: nowrap; } .nav a:hover, .nav a.active { color: var(--ink); } /* -------------------------------------------------------------------------- ⚠️ LE BOUTON DE L'EN-TETE GARDE SON TEXTE BLANC. -------------------------------------------------------------------------- Mesure du 03/08/2026 : « Creer un compte » affichait du gris #6E6E73 sur du noir #0B0B0C, soit un contraste de 3,88:1. Le minimum exige pour du texte normal est 4,5:1 (WCAG AA). Le bouton avait l'air DESACTIVE — sur le principal appel a l'action du site. Pourquoi : `.btn` declare `color: #fff`, mais `.nav a` (0,1,1) est plus specifique que `.btn` (0,1,0). La couleur du menu ecrasait donc celle du bouton, dans l'en-tete UNIQUEMENT — ailleurs sur le site, les memes boutons etaient blancs. D'ou un defaut qu'on ne voit pas en relisant la feuille. `:visited` est declare explicitement : sinon un bouton deja visite reprend la couleur des liens visites du navigateur. `:focus-visible` garde un contour net pour la navigation au clavier. -------------------------------------------------------------------------- */ .nav a.btn, .app-nav a.btn, .nav a.btn:visited, .app-nav a.btn:visited { color: #fff; } .nav a.btn:hover, .app-nav a.btn:hover { color: #fff; opacity: 0.88; } .nav a.btn:focus-visible, .app-nav a.btn:focus-visible { color: #fff; outline: 2px solid var(--accent); outline-offset: 2px; } /* Les memes boutons en variante claire gardent l'encre foncee. */ .nav a.btn-ghost, .app-nav a.btn-ghost, .nav a.btn-ghost:visited, .app-nav a.btn-ghost:visited, .nav a.btn-ghost:hover, .app-nav a.btn-ghost:hover { color: var(--ink); } /* Barre droite (badge facturation/tarifs + bouton menu mobile) */ /* -------------------------------------------------------------------------- ⚠️ `flex-shrink: 0` ICI, SINON L'ICONE ENTRE DANS LE PREMIER MOT DU MENU -------------------------------------------------------------------------- Signale par Raf le 03/08/2026 : « le logo retour rentre dans le premier mot a sa droite ». Mesure dans le navigateur, sur le site en ligne : largeur calculee de .bar-right ................ 0 px contenu qu'elle doit porter ................... 38 px espace entre l'icone et le premier lien ..... -20 px Zero. La boite etait completement ecrasee, a TOUTES les largeurs, et son contenu debordait entierement. Pourquoi : `min-width: 0` retire le plancher naturel d'un element flex — celui qui l'empeche de devenir plus etroit que son contenu. Avec `flex-shrink: 1` en plus, la boite se laissait comprimer jusqu'a rien des qu'il y avait la moindre tension dans la barre. Son unique enfant visible sur desktop, `.home-link`, porte `flex-shrink: 0` : lui ne retrecissait pas, il debordait. Et comme l'ecart de `.bar` se mesure sur la BOITE et non sur le contenu qui en sort, l'icone se retrouvait posee sur le texte. Pourquoi « en fonction de la langue » : la tension vient de la longueur des libelles. Le francais (« Comment ca marche », « A quoi sert votre argent ? ») la cree partout ; l'anglais, plus court, la cree moins souvent. Le defaut etait pourtant present dans les cinq langues. Rien dans cette boite ne peut retrecir. Lui permettre de retrecir ne pouvait donc produire qu'un debordement, jamais un gain. Apres correction, mesure a nouveau : ecart = +14 px, a toutes les largeurs. -------------------------------------------------------------------------- */ .bar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .plan-pill { display: none; font-size: 0.82rem; font-weight: 600; white-space: nowrap; padding: 8px 15px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--ink); } .plan-pill:hover, .plan-pill.active { background: var(--accent); color: #fff; } /* Sélecteur de langue compact affiché directement dans l'en-tête sur mobile (au lieu d'être caché dans le menu ☰) — cachée par défaut ici : sur desktop, le sélecteur reste à sa place habituelle, dans `.nav`. */ /* ⚠️ VISIBLE A TOUTES LES LARGEURS depuis la 0.3.6. Le selecteur etait masque sur desktop (il vivait alors dans `.nav`) et revele sur mobile. Le mini menu tenant en 60 px, il reste desormais dans la barre du dessus en permanence : une seule commande, au meme endroit, quelle que soit la taille de l'ecran. */ .lang-quick { display: inline-flex; flex-shrink: 0; } /* Petit lien discret « retour » présent sur toutes les pages (26/07/2026) : sur les pages publiques il renvoie vers `/` (header_public.php) ; dans l'espace membre il renvoie vers le tableau de bord, pas vers le site public (header_app.php) — masqué sur la page cible elle-même dans les deux cas, pour ne jamais proposer un « retour » vers la page déjà affichée. */ .home-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; color: var(--muted); transition: background .15s ease, color .15s ease; } .home-link:hover { background: var(--bg-2); color: var(--ink); } .nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); cursor: pointer; padding: 0; } .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; } /* Boutons — pilule */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--sans); font-size: 0.98rem; font-weight: 600; padding: 0.82em 1.5em; border-radius: var(--r-pill); border: 1px solid transparent; background: var(--ink); color: #fff; cursor: pointer; transition: transform .12s ease, opacity .2s ease, background .2s ease; } .btn:hover { opacity: 0.88; color: #fff; } .btn:active { transform: scale(0.98); } .btn-accent { background: var(--accent); } .btn-ghost { background: var(--bg-2); color: var(--ink); } .btn-ghost:hover { background: #ECECEF; color: var(--ink); opacity: 1; } /* Bouton « Espace membres » — repris de la couleur des QR (--gold), pour qu'il se lise comme une porte de service plutôt que comme un troisième appel à l'action en concurrence avec les deux autres. */ /* En CONTOUR, pas en aplat. Rempli, cet or foncé donnait un gros bouton kaki qui tirait l'œil plus que les deux vrais appels à l'action, et faisait daté. En contour il garde la couleur de marque, se lit comme une porte de service, et ne dispute plus la hiérarchie au bouton principal. Il se remplit au survol : le signal d'interactivité est conservé. */ .btn-gold { background: transparent; color: var(--gold); /* Repli d'abord : un navigateur qui ignore color-mix() rejetterait la déclaration entière et laisserait le bouton sans bordure — donc invisible, puisque le fond est transparent. */ border: 1px solid #BDB8AC; border-color: color-mix(in srgb, var(--gold) 45%, transparent); } .btn-gold:hover { background: var(--gold); color: #fff; border-color: var(--gold); opacity: 1; } .btn-gold svg { opacity: 0.7; } .btn-danger { background: transparent; color: var(--bad); border-color: var(--line-2); } .btn-danger:hover { background: var(--bad); color: #fff; opacity: 1; } .btn-sm { padding: 0.58em 1.05em; font-size: 0.86rem; } .btn-block { width: 100%; } .link-arrow { font-weight: 600; display: inline-flex; gap: 0.4rem; align-items: center; color: var(--ink); } .link-arrow .a { color: var(--accent); transition: transform .12s ease; } .link-arrow:hover { color: var(--accent); } .link-arrow:hover .a { transform: translateX(3px); } /* Hero */ .hero { position: relative; padding: 72px 0 56px; } .hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; } .hero h1 { margin: 20px 0 20px; } .hero .lede { max-width: 38ch; } /* Grille en « largeur du contenu » : elle prend la largeur de sa ligne la plus large — celle des deux boutons — ce qui donne au bouton « Espace membres » un repère par rapport auquel se centrer. Voir views/home.php. */ .hero-actions { display: grid; width: fit-content; margin-top: 28px; } .hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } /* La ligne sous les deux boutons du hero. Rouge et italique, a la demande — c'est une accroche, pas une note de bas de page. Le rouge est `--stamp`, celui du tampon « ASBL belge » deja present sur l'accueil, et non `--bad` : un message positif ne doit pas emprunter la couleur des erreurs, sur laquelle repose tout le reste de l'interface. */ .hero-note { margin: 14px 0 0; color: var(--stamp); font-style: italic; font-weight: 500; font-size: 0.95rem; line-height: 1.5; max-width: 46ch; } /* Porte de service, pas troisième appel à l'action : petite taille et filet de séparation. Posé en pleine taille sous les deux CTA, il créait un troisième bouton isolé au milieu du blanc et brouillait la hiérarchie — on ne savait plus lequel des trois était le geste attendu. */ /* Même gabarit que les deux appels à l'action au-dessus — un bouton plus petit paraissait écrasé sous eux. C'est le contour, et non la taille, qui le tient en retrait dans la hiérarchie. Les marges intérieures sont plus généreuses que celles d'un `.btn` ordinaire : seul sur sa ligne, il a besoin d'un peu de corps pour ne pas paraître étriqué. */ .hero-members { padding-left: 2.4em; padding-right: 2.5em; } .hero-members-row { display: flex; justify-content: center; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); } /* Deux sections « tight » qui se suivent cumulaient 56 px de bas et 56 de haut : 112 px de blanc entre la phrase-signature et le bandeau ASBL, sur une page qu'on venait justement de raccourcir. */ .section-tight + .section-tight { padding-top: 30px; } /* --------------------------------------------------------------------------- Réseaux — formulaire de saisie et affichage sur la carte publique. --------------------------------------------------------------------------- */ .social-block { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px; } .social-head { margin-bottom: 14px; } .social-head .lbl { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); } .social-head .help { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 4px; } .social-wa { align-items: flex-start; } .social-wa .help { display: block; font-size: 0.8rem; color: var(--muted); } /* Sur la carte : une rangée de pastilles, distincte des actions de contact. Le champ libre est le seul à porter son libellé — les autres sont reconnaissables à leur pictogramme, et un mot sous chaque icône ferait une deuxième liste là où on veut une ligne. */ .vc-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; } .vc-social { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-2); color: var(--soft); transition: background .15s ease, color .15s ease, transform .15s ease; } .vc-social svg { width: 20px; height: 20px; } .vc-social:hover { background: var(--accent-bg); color: var(--accent-ink); transform: translateY(-2px); } /* Le lien libre porte un texte : il lui faut une pastille allongée. */ .vc-social:has(span) { width: auto; border-radius: var(--r-pill); padding: 0 16px; font-size: 0.86rem; font-weight: 600; } /* --------------------------------------------------------------------------- La démonstration : ce qui change / ce qui ne change pas. Trois lignes à gauche, une flèche, une ligne à droite. C'est le seul argument que la page d'accueil développe — il doit donc être le plus soigné, et rester lisible sur un écran de 375 px (où la flèche pivote d'un quart de tour et la lecture redevient verticale). --------------------------------------------------------------------------- */ .swap-eyebrow { display: block; text-align: center; margin-bottom: 22px; } /* Colonnes au contenu (max-content) plutôt qu'en fractions : avec `1fr auto 1fr`, les deux colonnes de texte prenaient toute la largeur disponible et la flèche se retrouvait à cinquante pixels du bloc de droite mais à deux cents du bloc de gauche. Elle ne reliait plus rien. Ici le groupe entier est centré et les trois éléments restent solidaires. */ .swap { display: grid; grid-template-columns: max-content auto max-content; justify-content: center; align-items: center; gap: 0 30px; padding: 44px 36px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); } .swap-list { list-style: none; margin: 0; padding: 0; } .swap-list li { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.35; color: var(--soft); padding: 7px 0 7px 22px; position: relative; } /* Puce dessinée plutôt que list-style : elle doit rester alignée sur la première ligne même quand le texte passe sur deux lignes (NL, ZH). */ .swap-list li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); } .swap-arrow { display: flex; align-items: center; justify-content: center; color: var(--accent); } .swap-arrow svg { width: 74px; height: 24px; } /* Bornée à ~11 caractères pour tomber sur deux lignes : trois lignes à gauche face à une seule ligne à droite déséquilibrait le bloc. */ .swap-fixed { font-family: var(--serif); font-size: clamp(1.45rem, 2.8vw, 2.1rem); line-height: 1.2; color: var(--ink); margin: 0; letter-spacing: -0.02em; max-width: 11ch; } /* La phrase qui résume tout le service. En italique, centrée, avec de l'air : c'est une citation, pas un paragraphe de plus. */ .swap-note { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.02rem, 1.7vw, 1.24rem); line-height: 1.55; color: var(--soft); text-align: center; max-width: 62ch; margin: 30px auto 0; } /* Le tampon rouge « GETQRCARD.COM », posé en travers du hero, a été retiré le 28/07/2026 : il donnait au site l'air d'une maquette en chantier, ce qui est exactement l'inverse du signal recherché — on vend la promesse qu'une carte imprimée aujourd'hui marchera encore dans cinq ans. */ /* Carte QR (objet imprimé) */ .qr-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh); max-width: 340px; margin-left: auto; } /* Sur « Comment ça marche », la carte est un lien vers la démonstration : tout le monde n'a pas un second appareil sous la main pour scanner. */ a.qr-card { transition: transform .15s ease, box-shadow .15s ease; } a.qr-card:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.10); } a.qr-card .cap { transition: color .15s ease; } a.qr-card:hover .cap { color: var(--accent); } .qr-frame { display: grid; place-items: center; padding: 12px; background: #fff; border-radius: 14px; } .qr-frame canvas, .qr-frame img { width: 210px; height: 210px; } .qr-card .cap { margin-top: 14px; text-align: center; font-size: 0.78rem; color: var(--muted); } .qr-card .scan-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); } .dyn-line { display: flex; align-items: center; gap: 10px; margin-top: 18px; justify-content: center; font-size: 0.84rem; color: var(--soft); } .dyn-line .old { text-decoration: line-through; color: var(--muted); } .dyn-line .arrow { color: var(--accent); } /* Constellation (hero) — un QR fixe, relié à tous les usages possibles. */ .constellation-wrap { display: flex; justify-content: center; align-items: center; padding: 12px; } .constellation { width: 100%; max-width: 580px; height: auto; } /* -------------------------------------------------------------------------- L'ILLUSTRATION DU HERO EST UN LIEN VERS UNE VRAIE CARTE (03/08/2026) -------------------------------------------------------------------------- Un dessin cliquable ne se devine pas. Sur un telephone il n'y a meme pas de survol pour l'apprendre. La mention est donc VISIBLE EN PERMANENCE, posee sur l'image, et non revelee au passage de la souris. `overflow: hidden` + `border-radius` : la mention epouse le coin de l'illustration au lieu d'en depasser. -------------------------------------------------------------------------- */ .constellation-lien { position: relative; display: inline-flex; border-radius: 20px; overflow: hidden; line-height: 0; transition: transform .18s ease; } .constellation-lien:hover { transform: translateY(-2px); } .constellation-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .constellation-cta { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--r-pill); background: var(--ink); color: #FFF; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: 0 2px 12px rgba(0,0,0,.22); } /* ⚠️ La regle globale `img, svg, canvas { display: block }` casserait l'alignement du pictogramme dans la pastille : on le remet en ligne ici. */ .constellation-cta svg { display: inline-block; flex-shrink: 0; } .constellation-lien:hover .constellation-cta { background: var(--accent); } /* -------------------------------------------------------------------------- RAPPEL DE L'OFFRE CHOISIE, EN HAUT DU FORMULAIRE D'INSCRIPTION -------------------------------------------------------------------------- Il ne s'affiche QUE si l'offre payante a ete choisie sur la page des tarifs. Sur une inscription ordinaire, le formulaire est exactement celui d'avant — ce bloc n'existe pas dans le HTML. -------------------------------------------------------------------------- */ .offre-rappel { background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--r); padding: 16px 18px; margin: 0 0 22px; } .offre-rappel-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .offre-rappel-tete strong { font-family: var(--display); font-size: 1.25rem; } .offre-rappel-tete .muted { font-family: var(--sans); font-size: 0.82rem; font-weight: 400; } .offre-rappel ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; } .offre-rappel li { font-size: 0.88rem; color: var(--ink-2); padding-left: 18px; position: relative; } .offre-rappel li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .offre-rappel .help { margin: 0; } /* -------------------------------------------------------------------------- AFFICHER / MASQUER LE MOT DE PASSE -------------------------------------------------------------------------- Le bouton est POSE DANS le champ, a droite. Le `padding-right` de l'input lui reserve la place : sans lui, un mot de passe long passerait dessous. 44 px de cote : c'est la taille minimale d'une cible tactile confortable. Le bouton nait avec l'attribut `hidden` et n'est revele que par le script — un bouton qui ne fait rien vaut moins que pas de bouton. -------------------------------------------------------------------------- */ .mdp-champ { position: relative; display: block; } .mdp-champ .input { padding-right: 48px; } .mdp-oeil { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 50%; padding: 0; color: var(--muted); cursor: pointer; transition: background .14s ease, color .14s ease; } .mdp-oeil[hidden] { display: none; } .mdp-oeil:hover { background: var(--bg-2); color: var(--ink); } .mdp-oeil:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Etat « mot de passe visible » : l'oeil est barre ET l'icone passe a l'encre pleine. Deux signaux, parce que le trait seul est tenu a lire. */ .mdp-oeil[aria-pressed="true"] { color: var(--ink); } .mdp-oeil[aria-pressed="true"]::after { content: ''; position: absolute; left: 9px; right: 9px; top: 50%; height: 1.8px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; } /* Accès « Mon compte » (connexion) intégré au hero de l'accueil — évite à un client existant de quitter la page pour se connecter. 3e cellule de `.hero-grid`, toujours sur toute la largeur (grid-column: 1/-1), qu'on soit sur la grille 2 colonnes (desktop) ou 1 colonne (mobile). */ .hero-login { grid-column: 1 / -1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 26px 24px; margin-top: 4px; box-shadow: var(--sh-sm); } .hl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .hl-form { display: flex; gap: 12px; align-items: stretch; } .hl-field { position: relative; display: flex; align-items: center; flex: 1 1 180px; min-width: 0; } .hl-field svg { position: absolute; left: 15px; color: var(--muted); pointer-events: none; } .hl-field .input { padding-left: 42px; } .hl-form .btn { flex: 0 0 auto; white-space: nowrap; } .hl-alt { margin-top: 16px; text-align: center; } /* Comparaison QR Code (statique) vs QRcard (dynamique) */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .cmp { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; } .cmp.dynamic { border: 2px solid var(--accent); box-shadow: var(--sh); } .cmp-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill); } .cmp.static .cmp-tag { background: var(--bg-2); color: var(--muted); } .cmp.dynamic .cmp-tag { background: var(--accent-bg); color: var(--accent-ink); } .cmp-name { font-family: var(--display); font-weight: 700; font-size: 1.45rem; margin: 16px 0 4px; letter-spacing: -0.02em; } .cmp-sub { color: var(--soft); font-size: 0.92rem; margin-bottom: 12px; } .cmp-list { list-style: none; margin: 0; padding: 0; } .cmp-list li { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line); font-size: 0.96rem; color: var(--ink-2); } .cmp-list .mk { font-weight: 700; flex: none; line-height: 1.5; } .cmp.static .cmp-list li { color: var(--soft); } .cmp.static .mk { color: var(--muted); } .cmp.dynamic .mk { color: var(--accent); } /* Étapes numérotées */ .numbered { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .numbered .cell { background: var(--card); border-radius: var(--r-lg); padding: 28px 26px; box-shadow: var(--sh-sm); } .numbered .n { font-family: var(--display); font-weight: 700; font-size: 1.9rem; color: var(--accent); line-height: 1; } .numbered h3 { margin: 16px 0 8px; } .numbered p { color: var(--soft); margin: 0; font-size: 0.98rem; } /* ========================================================================== ⚠️ L'EN-TÊTE PASSE AU MENU ☰ DÈS 1279 px, ET NON PLUS 900 px ========================================================================== L'EN-TÊTE NE TENAIT PAS EN FRANÇAIS. Mesuré dans le navigateur le 03/08/2026, sur macarteqr.fr/tarifs, à la largeur MAXIMALE du site : place disponible (wrap 1240 moins 48 de marge) ...... 1192 px place nécessaire .................................... 1298 px manque .............................................. -106 px Le détail : marque 157 · icône retour 38 · « Comment ça marche » 143 · « À quoi sert votre argent ? » 174 · les cinq langues 173 · « Créer un compte » 150 · le reste réparti. Le seuil du menu ☰ était à 900 px. Entre 901 et 1400 px, le site affichait donc une barre complète qui ne rentrait pas : la page partait vers la droite de 28 px à 1280, 168 px à 1120, 348 px à 940. Toute la fenêtre glissait latéralement. Les audits précédents ne mesuraient qu'à 390 et 320 px — la panne était pile dans l'angle mort. Ce que ça touche : tout écran de portable 1280 ou 1366, et toute fenêtre ouverte sur une moitié d'écran. Ce n'est pas un cas rare. Deux corrections, dans cet ordre : 1. on resserre (écarts 18 → 14 px, texte 0,91 → 0,88 rem, langues plus compactes). Mesure après : la barre tient jusqu'à 1280 px inclus. 2. en dessous, le menu ☰ prend le relais. C'est ce bloc. ⚠️ POURQUOI PAS SEULEMENT RESSERRER. Parce que sous 1280 px il faudrait descendre le texte du menu sous 0,8 rem et les langues sous 24 px de large. On rendrait illisible et intouchable ce qu'on essaie de garder visible. Un menu ☰ qui fonctionne vaut mieux qu'une barre qui déborde. ⚠️ NE PAS REDESCENDRE CE SEUIL À 900 px sans remesurer les cinq langues. Le français est le plus large : c'est lui qui commande. ========================================================================== */ @media (max-width: 1279px) { /* Le badge Tarifs/Facturation disparaît de la barre : le lien existe déjà dans le menu ☰, à un tap. */ .plan-pill { display: none; } .nav-toggle { display: flex; } .nav, .app-nav { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 20px 18px; box-shadow: 0 12px 24px -12px rgba(0,0,0,.18); max-height: calc(100vh - 66px); overflow-y: auto; } .nav.open, .app-nav.open { display: flex; } .nav a, .app-nav a { width: 100%; padding: 14px 6px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 1rem; } .nav a.btn, .app-nav a.btn { border-bottom: none; margin-top: 8px; } .app-nav a.active { background: none; } .app-nav form { width: 100%; padding: 12px 0 2px; } .app-nav form .btn { width: 100%; } /* Le sélecteur « plein format » du menu ☰ est masqué : il est remplacé par la pastille compacte `.lang-quick`, toujours visible dans la barre. Pas besoin des deux à la fois. */ /* L'EN-TÊTE SUR DEUX LIGNES : logo et ☰ sur la première, les cinq langues centrées sur la seconde. Les tasser sur une seule ligne demanderait de descendre les cibles tactiles sous 30 px — le seuil en dessous duquel on rate la bonne langue une fois sur trois. `height: auto` est indispensable : `.bar` était figée à 66 px, la seconde ligne serait sortie du cadre. `min-height` conserve la hauteur d'origine quand il n'y a rien à mettre à la ligne. */ /* ------------------------------------------------------------------ ⚠️ L'EN-TETE TIENT SUR UNE SEULE LIGNE DEPUIS LA 0.3.7. ------------------------------------------------------------------ Il passait sur deux lignes : logo et ☰ en haut, les langues centrees en dessous. C'etait justifie tant que le selecteur affichait CINQ pastilles de 44 px — 220 px, impossible a caser a cote du logo. Le mini menu de la 0.3.6 n'en fait plus que 60. La deuxieme ligne ne servait donc plus qu'a manger 40 px de hauteur en haut de chaque page, sur l'ecran ou la hauteur est la plus rare. Signale par Raf le 03/08/2026, capture a l'appui. Le compte a 390 px : logo 157 + menu 60 + ☰ 44 + deux ecarts de 14 = 289 px, pour 354 disponibles. Il reste 65 px de marge. ⚠️ `flex-wrap: nowrap` est explicite : sans lui, la barre reprendrait le droit de se replier des qu'un element grandit un peu, et on retomberait sur deux lignes sans comprendre pourquoi. ------------------------------------------------------------------ */ .site-header .bar, .app-header .bar { flex-wrap: nowrap; height: 66px; min-height: 0; padding-bottom: 0; } /* L'ordre visuel : logo a gauche, puis langue et ☰ colles a droite. `margin-left: auto` pousse le groupe de droite ; c'est ce qui remplace le `space-between`, devenu inutilisable avec trois enfants. */ .brand { order: 1; } .lang-quick { order: 2; margin-left: auto; } .bar-right { order: 3; } /* ⚠️ LES CIBLES TACTILES SUIVENT CE SEUIL, PAS CELUI DE 900 px. Elles etaient dans le bloc 900 px. Or des que l'en-tete passe en mode ☰ — c'est-a-dire ici, a 1279 px — on est sur un appareil qui se touche : un iPad en paysage fait 1024 px de large et n'a pas de souris. Laisser les pastilles a 34 px dans cette plage revenait a soigner le telephone et a oublier la tablette. Mesure a 1180 px avant correction : 29 cibles sous 44 px. */ .nav-toggle { width: 44px; height: 44px; } .brand { padding: 5px 0; } } /* ========================================================================== PASSE « PLUS PREMIUM » (0.3.10, 03/08/2026) ========================================================================== Demande de Raf : « plus premium, plus palace, sans etre trop vibe code ». CE QUE J'AI COMPRIS PAR « TROP VIBE CODE » — et donc ce que ce bloc n'utilise NULLE PART : · degrades violets ou multicolores ; · effets de verre depoli, halos lumineux, lueurs colorees ; · coins tres arrondis partout (le « tout en bulles ») ; · animations qui rebondissent, elements qui montent au survol de 8 px ; · emojis en guise d'icones. Ce sont les tics qui font qu'une page a l'air produite en serie. CE QUI FAIT REELLEMENT « PALACE », ET QUI EST ICI : 1. DE L'ESPACE. Un hall de palace n'est pas decore, il est VIDE. On n'ajoute rien : on ecarte. 2. DES MATIERES CALMES. Papier chaud plutot que gris froid (voir les jetons en haut du fichier), filets fins plutot que cadres marques. 3. DE LA RETENUE DANS L'ACCENT. Le bleu vif employe partout — titres, filets, pastilles — est ce qui fait « application ». Il reste, mais pour les ACTIONS. L'identite est portee par l'encre et le papier. 4. DES CHIFFRES ALIGNES. Un tableau dont les colonnes de chiffres ne s'alignent pas se lit comme un brouillon. 5. DES GESTES LENTS. Rien ne rebondit. Tout se deplace de 1 a 2 px, en 250 ms, avec une courbe qui decelere. ========================================================================== */ /* --- 1. Les cartes reposent sur la page, elles ne flottent pas ------------- */ .panel, .why-cell, .plan, .door, .guide-feature { transition: box-shadow .25s cubic-bezier(.2,.6,.2,1), transform .25s cubic-bezier(.2,.6,.2,1), border-color .25s ease; } .door:hover, .why-cell:hover, .guide-feature:hover { box-shadow: var(--sh-lift); border-color: var(--line-2); transform: translateY(-2px); /* 2 px. Pas 8. */ } /* --- 2. Les chiffres s'alignent ------------------------------------------- */ /* `tabular-nums` donne a tous les chiffres la MEME largeur : les colonnes d'un tableau tombent alors les unes sous les autres au pixel pres. Sans cela, un « 1 » etroit decale toute la ligne, et l'oeil lit du desordre avant de lire des donnees. */ .stat .v, .plan .price, .dep-table td, .bar-axis, .dist .small, .stats-row .v, .offre-rappel-tete strong { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* --- 3. Les boutons ne rebondissent plus ---------------------------------- */ /* `transform: scale(0.98)` au clic imite le bouton d'une application mobile. Sur un site vitrine, cela fait maquette. Un vrai bouton s'enfonce : il descend d'un pixel et son ombre se resserre. */ .btn { transition: transform .2s cubic-bezier(.2,.6,.2,1), box-shadow .2s ease, opacity .2s ease, background .2s ease; box-shadow: 0 1px 2px rgba(28,25,23,.10); } .btn:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); } .btn:active { transform: translateY(0); box-shadow: none; } /* --- 4. Le sur-titre porte un filet d'or --------------------------------- */ /* Un trait de 22 px, dans l'or du QR imprime. C'est le seul ornement de la page, et il est deliberement minuscule : un detail qui se remarque est un detail rate. Il reprend la couleur de l'encre du code — la page et l'objet imprime parlent la meme langue. */ .eyebrow { position: relative; padding-left: 30px; } .eyebrow::before { content: ''; position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: var(--gold); opacity: .85; } /* --- 5. Un seul anneau de focus, partout --------------------------------- */ /* Le contour par defaut du navigateur change d'un navigateur a l'autre et colle au texte. Celui-ci est identique partout et respire. Il n'est JAMAIS supprime : quelqu'un qui navigue au clavier doit savoir ou il se trouve. */ :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* --- 6. Le texte long respire -------------------------------------------- */ /* 1.6 convient a de l'interface. Pour de la prose lue en entier, 1.7 reduit nettement la fatigue — et une mesure plafonnee a 68 caracteres empeche l'oeil de perdre sa ligne en revenant a la marge. */ .lede { line-height: 1.68; } .legal-body p, .legal-body li { line-height: 1.72; max-width: 68ch; } /* ========================================================================== PASSE MOBILE — LES CIBLES TACTILES (0.3.10, 03/08/2026) ========================================================================== Mesure au navigateur sur la page d'accueil a 390 px, avant correction : 30 elements cliquables sous 44 px de haut. Les pires : « Voir la FAQ » ................................. 20 px « Pourquoi nous faire confiance » ............... 26 px les liens du pied de page ....................... 32 px les pastilles de langue ......................... 34 px 44 px est la recommandation d'Apple comme de Google, et elle ne sort pas de nulle part : c'est la largeur moyenne d'une pulpe de doigt. En dessous, on ne rate pas la cible de temps en temps, on la rate SYSTEMATIQUEMENT quand on marche, qu'on tient l'appareil d'une main, ou qu'on a plus de soixante ans. Le pied de page est le cas le plus grave : ce sont des liens EMPILES, donc une erreur de quelques pixels n'ouvre pas rien, elle ouvre LA PAGE D'A COTE. C'est plus agacant qu'un clic perdu. ⚠️ ON AGRANDIT LA ZONE, PAS LE TEXTE. Le remplissage vertical fait grandir la cible sans toucher a la taille des caracteres : la mise en page respire pareil, seule la surface tactile change. Grossir le texte aurait rallonge une page qui fait deja 6,5 ecrans. ========================================================================== */ @media (max-width: 900px) { /* Liens empiles du pied de page : 32 -> 44 px. */ .footer-col a { padding: 11px 0; } /* Les liens de fin de section poses dans un paragraphe (« Voir la FAQ », « Pourquoi nous faire confiance », le credit de l'editeur en pied de page). `inline-block` est INDISPENSABLE : un element `inline` ignore le remplissage vertical dans le calcul de sa zone cliquable — la cible serait restee a 20 px malgre le padding. ⚠️ `.link-arrow` ET NON `.trust-text a`. Premier jet ecrit de memoire, et il ne visait aucun element : la classe reelle est `.link-arrow`. La mesure au navigateur l'a montre (26 px, inchange). Un selecteur qui ne correspond a rien ne provoque aucune erreur — il ne fait simplement rien, en silence. C'est pour cela qu'on remesure au lieu de relire. */ .cta-faq a, .link-arrow, .swap-note a, .footer-entity a { display: inline-block; padding: 11px 2px; } /* Les cinq pastilles de langue : 34 -> 44 px. Elles sont COLLEES les unes aux autres sur une seule ligne — c'est exactement la configuration ou une cible trop petite fait choisir la MAUVAISE langue, et ou l'erreur coute cher puisqu'elle recharge toute la page dans une langue qu'on ne lit pas. 5 x 44 = 220 px : large sur un ecran de 320 px. */ /* ⚠️ `.lang-opt`, `.nav-toggle` et `.brand` sont dimensionnes dans le bloc 1279 px ci-dessus, avec le reste de l'en-tete tactile. Les redeclarer ici en ferait une deuxieme source de verite pour la meme regle. */ /* Le sur-titre etait a 11,2 px. En capitales tres espacees, c'est la limite du lisible sur un ecran tenu a bout de bras. */ .eyebrow { font-size: 0.75rem; } } /* ========================================================================== PASSE MOBILE — LE TAMPON NE DOIT RIEN RECOUVRIR ========================================================================== Il est en position fixe : il ne defile pas, donc il est susceptible de se poser sur N'IMPORTE QUEL contenu de la page, pas seulement sur le hero. `pointer-events: none` garantit deja qu'il n'intercepte aucun clic — mais il peut encore GENER LA LECTURE. D'ou l'encre plus claire sur petit ecran (voir .tampon-vie plus bas) et, ci-dessous, une marge de securite en haut de la premiere section : sans elle, le sur-titre « Carte de visite numerique » passait dessous. ========================================================================== */ @media (max-width: 900px) { .hero { padding-top: 40px; } } /* ========================================================================== LE TAMPON FIXE « À VIE ET GRATUIT ! » — page d'accueil uniquement ========================================================================== Un vrai tampon encreur, obtenu SANS AUCUNE IMAGE. Trois choses le distinguent d'un simple badge tourné : 1. L'ENCRE EST IRRÉGULIÈRE. Un tampon ne dépose jamais une couleur pleine : le caoutchouc porte mal l'encre, et il reste des manques. C'est le rôle du `mask-image` en pointillés radiaux — il grignote la couleur de façon aléatoire, sur le cadre comme sur les lettres. Sans lui, on lit « badge SVG », pas « tampon ». 2. IL EST IMPRIMÉ, PAS POSÉ. `mix-blend-mode: multiply` fait que l'encre se multiplie avec ce qu'il y a dessous au lieu de le recouvrir : le texte de la page transparaît légèrement à travers, exactement comme de l'encre sur du papier déjà imprimé. 3. IL EST DE TRAVERS, MAIS PAS TROP. -13 degrés : au-delà on lit « autocollant décoratif », en deçà on croit à une erreur de mise en page. ⚠️ `pointer-events: none` EST OBLIGATOIRE. Il est en position fixe par-dessus toute la page ; sans cela il intercepterait les clics de ce qui se trouve dessous, et comme il ne mène nulle part, ce serait un trou noir dans le coin de l'écran. ⚠️ Z-INDEX 30, SOUS L'EN-TÊTE (40). L'en-tête est collant : si le tampon passait devant, il recouvrirait le bouton « Créer un compte » au défilement. ========================================================================== */ .tampon-vie { position: fixed; top: 96px; right: 40px; z-index: 30; pointer-events: none; /* ------------------------------------------------------------------ ⚠️ ROTATION POSITIVE : LE TAMPON PENCHE VERS L'INTERIEUR DE LA PAGE. ------------------------------------------------------------------ Premier jet a -13deg, donc dans le sens inverse des aiguilles : le bout droit du texte MONTAIT. Place dans le coin superieur droit, il pointait donc vers l'exterieur de l'ecran — il donnait l'impression de s'echapper de la page au lieu d'y etre appose. A +13deg, le bout droit descend : le tampon penche vers le centre de la page. C'est le geste naturel de quelqu'un qui tamponne un document tenu devant lui, et l'oeil est ramene vers le contenu au lieu d'etre emmene hors cadre. ⚠️ SI LE TAMPON DEMENAGE UN JOUR A GAUCHE, IL FAUDRA REPASSER EN NEGATIF : c'est la position dans l'ecran qui decide du signe, pas l'esthetique du tampon pris isolement. ------------------------------------------------------------------ */ transform: rotate(13deg); mix-blend-mode: multiply; /* L'apparition est lente et discrete : un tampon qui surgit ressemble a une publicite. Celui-ci est deja la quand on regarde. */ animation: tampon-encre .9s ease-out both; } @keyframes tampon-encre { from { opacity: 0; transform: rotate(13deg) scale(1.14); } to { opacity: 1; transform: rotate(13deg) scale(1); } } /* Quelqu'un qui a demande a reduire les animations ne veut pas d'un tampon qui tombe sur sa page. */ @media (prefers-reduced-motion: reduce) { .tampon-vie { animation: none; } } /* -------------------------------------------------------------------------- ⚠️ LE CADRE RESTE NET. SEULES LES LETTRES PERDENT DE L'ENCRE. -------------------------------------------------------------------------- Deux essais rates avant celui-ci, juges a l'ecran dans Chrome : 1er essai — masque en TRAME DE POINTS sur tout le tampon. Une trame de points ne GARDE que les points : elle a mange environ 80 % de l'encre. Le tampon etait illisible, on lisait un gribouillis rose. 2e essai — masque inverse (encre pleine percee de manques), toujours sur tout le tampon, cadre compris. Les lettres devenaient bonnes, mais le CADRE tournait au pointille regulier : sur un filet de 3 px, un manque de 1,5 px en emporte la moitie, et les trous tombent a intervalles egaux le long d'une ligne droite. On lisait « cadre perfore », pas « tampon ». D'ou cette version : le cadre est plein, le masque ne porte que sur le texte. C'est d'ailleurs plus juste. Un tampon appuye franchement laisse un contour net ; ce sont les pleins des lettres, la ou le caoutchouc porte le plus d'encre, qui accrochent mal. Trois trames a des pas premiers entre eux (9, 14, 19 px) et a des origines differentes : leur recouvrement ne se repete pas a l'oeil. `intersect` : un manque de N'IMPORTE LAQUELLE des trames perce l'encre, donc les defauts s'accumulent au lieu de s'annuler. -------------------------------------------------------------------------- */ .tv-cadre { display: flex; align-items: center; justify-content: center; padding: 13px 24px; border: 3px solid var(--stamp); border-radius: 7px; /* Le double filet : c'est ce qui fait « tampon officiel » plutot que « cadre de bouton ». */ box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 3.5px var(--stamp); color: var(--stamp); opacity: .78; } .tv-txt { font-family: var(--display); font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.15; text-align: center; max-width: 9ch; -webkit-mask-image: radial-gradient(circle at 27% 41%, transparent 0 .9px, #000 1.05px), radial-gradient(circle at 68% 73%, transparent 0 .7px, #000 .85px), radial-gradient(circle at 88% 19%, transparent 0 1.1px, #000 1.25px); mask-image: radial-gradient(circle at 27% 41%, transparent 0 .9px, #000 1.05px), radial-gradient(circle at 68% 73%, transparent 0 .7px, #000 .85px), radial-gradient(circle at 88% 19%, transparent 0 1.1px, #000 1.25px); -webkit-mask-size: 9px 9px, 14px 14px, 19px 19px; mask-size: 9px 9px, 14px 14px, 19px 19px; -webkit-mask-composite: source-in; mask-composite: intersect; } /* ⚠️ REPLI POUR LES NAVIGATEURS SANS `mask-composite`. Sans ce test, les trois trames se combinent de facon imprevisible et le texte peut disparaitre. On lui rend alors une encre pleine : moins texture, mais toujours lisible. Un tampon un peu trop propre vaut mieux qu'un mot efface. */ @supports not ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) { .tv-txt { -webkit-mask-image: none; mask-image: none; } } @media (max-width: 1279px) { /* L'en-tete passe sur deux lignes des 1279 px : il fait alors une centaine de pixels de haut. A `top: 96px` le tampon se glissait dessous et son coin se retrouvait coupe. */ .tampon-vie { top: 120px; } } @media (max-width: 900px) { /* Sur telephone il reste PRESENT — c'est ce qui a ete demande — mais plus petit, plus haut et plus clair : sur 390 px de large, la meme densite d'encre mangeait le texte en dessous. */ .tampon-vie { top: 112px; right: 12px; } .tv-cadre { padding: 8px 14px; border-width: 2.5px; opacity: .62; } .tv-txt { font-size: 0.76rem; letter-spacing: 0.05em; max-width: 8ch; } } @media (max-width: 400px) { /* A 320 px, le compte devient juste : on reprend 14 px sur les ecarts et un peu sur la marque, plutot que de laisser la barre deborder. */ .site-header .bar, .app-header .bar { gap: 8px; } .brand { font-size: 1.18rem; } .lang-menu summary { padding: 0 7px; } } @media (max-width: 380px) { .tampon-vie { top: 108px; right: 7px; } .tv-txt { font-size: 0.7rem; } } /* Pourquoi nous (page + cartes de confiance) */ .why-cell { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 26px; box-shadow: var(--sh-sm); } .why-cell h3 { margin: 0; } /* Bandeau de confiance (page d'accueil) — tampon rond + court argumentaire, lien vers /pourquoi-nous. */ .trust-stamp { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 168px; height: 168px; border-radius: 50%; flex: none; border: 2px solid var(--accent); box-shadow: inset 0 0 0 5px var(--accent-bg); transform: rotate(-6deg); text-align: center; padding: 16px; font-family: var(--display); color: var(--accent-ink); transition: transform .15s ease; } .trust-stamp:hover { transform: rotate(-2deg) scale(1.04); color: var(--accent-ink); } .trust-stamp .ts-l1 { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; } .trust-stamp .ts-div { font-size: 0.7rem; margin: 6px 0; opacity: 0.6; } .trust-stamp .ts-l2 { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; } /* Le tampon a l'air d'un simple badge décoratif — sans indice, personne ne devine qu'il est cliquable (encore moins sur mobile, où il n'y a pas de survol). Petite pastille flèche toujours visible, contre-pivotée pour rester bien droite malgré la rotation du tampon. */ .trust-stamp .ts-arrow { position: absolute; right: -2px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 700; box-shadow: var(--sh-sm); border: 2px solid var(--bg); transform: rotate(6deg); } /* Le bandeau utilisait `.grid.cols-2`, ce qui donnait deux colonnes égales : le tampon (168 px) flottait au milieu d'une demi-page vide. Colonne « au plus juste » pour le tampon, tout le reste au texte. */ .trust-banner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 44px; } .trust-banner > div:last-child { min-width: 0; } .trust-title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 12px; } .trust-text { font-size: 1.02rem; max-width: 52ch; margin-bottom: 14px; } /* Points détaillés (page « Comment ça marche ») — filet fin plutôt qu'un trait épais : la règle typographique remplace la barre graphique. */ .detail-point { border-top: 1px solid var(--line-2); padding-top: 18px; margin-bottom: 30px; } .detail-point h3 { margin: 8px 0 8px; } .detail-point p { color: var(--soft); margin: 0; } /* Bénéfices */ .feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; } .feat h3 { margin-bottom: 8px; } .feat p { color: var(--soft); font-size: 0.98rem; margin: 0; } /* --------------------------------------------------------------------------- Deux gestes de création côte à côte (tableau de bord, liste des cartes). Sur mobile ils passent pleine largeur : deux boutons serrés l'un contre l'autre sur 375 px deviennent deux cibles trop petites pour le pouce. --------------------------------------------------------------------------- */ .head-actions { display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 560px) { .head-actions { width: 100%; } .head-actions .btn { flex: 1 1 100%; } } /* Paliers de l'offre organisations */ .org-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .org-tier { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; } .org-tier .ot-seats { font-family: var(--display); font-weight: 600; font-size: 0.92rem; color: var(--soft); } .org-tier .ot-price { font-family: var(--serif); font-size: 2.3rem; line-height: 1; margin: 10px 0 6px; color: var(--ink); } .org-tier .ot-price small { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); } .org-tier .ot-unit { font-size: 0.85rem; color: var(--muted); } /* Le formulaire de devis à droite de l'argumentaire : sur un écran étroit l'ordre s'inverse naturellement (une seule colonne), le texte d'abord. */ .org-form-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; } .org-form { position: relative; } @media (max-width: 900px) { .org-tiers { grid-template-columns: 1fr; } .org-form-wrap { grid-template-columns: 1fr; gap: 28px; } } /* --------------------------------------------------------------------------- Mise en avant de la signature d'e-mail (accueil). --------------------------------------------------------------------------- */ .sig-promo { display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: center; } .sig-promo-list { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 9px; } .sig-promo-list li { position: relative; padding-left: 24px; color: var(--ink-2); font-size: 0.98rem; } .sig-promo-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; } /* Illustration d'une signature — des blocs, pas du texte : elle doit se lire d'un coup d'œil comme une forme reconnaissable, et rester muette pour les lecteurs d'écran (aria-hidden côté HTML). */ .sig-demo { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--sh-sm); } .sig-demo .sd-logo { width: 64px; height: 22px; border-radius: 4px; background: var(--gold); opacity: .85; margin-bottom: 14px; } .sig-demo .sd-name { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); } .sig-demo .sd-role { font-size: 0.84rem; color: var(--soft); margin-bottom: 12px; } .sig-demo .sd-line { height: 7px; border-radius: 4px; background: var(--bg-2); margin-bottom: 7px; } .sig-demo .sd-line.short { width: 62%; } .sig-demo .sd-qr { position: absolute; right: 22px; bottom: 22px; width: 54px; height: 54px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px), repeating-linear-gradient(0deg, var(--gold) 0 6px, transparent 6px 12px); opacity: .8; } @media (max-width: 900px) { .sig-promo { grid-template-columns: 1fr; gap: 28px; } /* L'illustration passe APRÈS le texte : sur un écran étroit, une image décorative en tête repousse l'argument hors de vue. */ .sig-demo { order: 2; max-width: 320px; } } /* --------------------------------------------------------------------------- Champs facultatifs ajoutés un par un. --------------------------------------------------------------------------- */ .extra-block { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px; } .extra-rows { display: grid; gap: 14px; margin-bottom: 14px; } .extra-row { margin-bottom: 0; } .extra-input { display: flex; gap: 8px; align-items: center; } .extra-input .input { flex: 1 1 auto; min-width: 0; } /* Cible tactile de 40 px : un « × » de 16 px se rate une fois sur deux au pouce, et l'utilisateur efface alors le champ voisin. */ .extra-remove { flex: none; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .extra-remove:hover { border-color: var(--bad); color: var(--bad); } .extra-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .extra-add .select { flex: 1 1 220px; min-width: 0; } @media (max-width: 560px) { .extra-add .select, .extra-add .btn { flex: 1 1 100%; } } /* --------------------------------------------------------------------------- Signature d'e-mail. --------------------------------------------------------------------------- */ .sig-color-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* Le sélecteur natif est minuscule et quasi invisible sur mobile : on lui donne une vraie surface, sinon personne ne le remarque. */ .sig-color-row input[type=color] { width: 52px; height: 40px; flex: none; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); cursor: pointer; } .logo-preview { max-height: 48px; width: auto; border-radius: 4px; background: var(--bg-2); padding: 4px; } .sig-grid { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; } /* L'APERÇU SUIT LE DÉFILEMENT. Le panneau de gauche est long ; en descendant jusqu'aux curseurs, le rendu sortait de l'écran et on réglait une taille sans voir ce qu'elle donnait. C'est précisément ce qu'un aperçu doit empêcher. `sticky` suffit : aucun script, et le navigateur le gère mieux que nous ne le ferions. */ @media (min-width: 901px) { .sig-live { position: sticky; top: 16px; } } /* Les réglages doivent tenir dans un écran, sans défilement : c'est en descendant vers les curseurs qu'on perdait l'aperçu de vue. D'où des lignes d'une seule hauteur de texte, et plus de colonne de rappel — le titulaire vient de saisir ces valeurs, les lui remontrer coûtait une ligne par champ et forçait le libellé à se couper en deux. */ .sig-fields { display: grid; gap: 0; } .sig-field { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r); cursor: pointer; transition: background .12s ease; } .sig-field:hover { background: var(--bg-2); } .sig-field input { accent-color: var(--ink); } .sig-field .sf-label { font-size: 0.88rem; line-height: 1.3; } .sig-field-credit { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; } /* Ligne réordonnable : la case et son libellé restent un