/* ============================================================================ SITE — les blocs propres à krescia-partners.com. Ne contient que ce que base.css ne couvre pas. Aucune valeur d'espacement hors de l'échelle de tokens.css, aucune couleur hors palette. ⚠️ Plancher typographique : 15 px. Aucune déclaration font-size en dessous. ============================================================================ */ /* ---------------------------------------------------------- 1. En-tête ---- */ .hd { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / .93); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--ligne); } .hd__in { display: flex; align-items: center; gap: var(--e-5); min-height: 68px; } .hd nav { margin-left: auto; display: flex; align-items: center; gap: var(--e-5); } /* ⚠️ `:not(.btn)` N'EST PAS COSMÉTIQUE. Sans lui, `.hd nav a` (spécificité 0,1,2) écrase `.btn--primaire` (0,1,0) de base.css : le libellé du CTA repassait en --encre-2 sur le vert de marque, soit ~1,6:1 — illisible. Constaté à la capture du 09/08. Même piège au pied avec `.foot a`. Règle générale : une règle de couleur portée sur `a` exclut toujours les boutons. */ .hd nav a:not(.btn) { font-size: var(--fs-small); color: var(--encre-2); text-decoration: none; padding: var(--e-3) var(--e-1); min-height: var(--min-cible); display: inline-flex; align-items: center; border-bottom: 2px solid transparent; transition: color var(--d-micro), border-color var(--d-micro); } .hd nav a:not(.btn):hover, .hd nav a:not(.btn)[aria-current="page"] { color: var(--marque); border-bottom-color: var(--marque); } .hd .btn { padding-block: var(--e-3); } @media (max-width: 860px) { .hd nav { gap: var(--e-3); } .hd nav a.opt { display: none; } /* les pages secondaires restent au pied */ } /* ⚠️ Sous 560 px, le wordmark déployé (logo + « Krescia » + « PARTNERS » en ligne) fait à lui seul ~240 px : la barre débordait de 148 px (width-sweep du 09/08). On EMPILE le wordmark — c'est aussi la forme d'origine de la V5 — et on ne garde que l'action. Method et Monitoring restent à un doigt, dans le pied de page. */ /* La barre d'action fixe porte désormais le même CTA en bas d'écran : le garder AUSSI dans l'en-tête, c'est demander deux fois la même chose sur 390 px. */ @media (max-width: 767px) { .hd nav .btn { display: none; } } @media (max-width: 560px) { .hd__in { gap: var(--e-3); } .hd nav a:not(.btn) { display: none !important; } .wm { gap: var(--e-2); } .wm img { width: 28px; } .wm b { font-size: 21px; display: flex; flex-direction: column; line-height: 1.05; } .wm i { margin-left: 0; align-self: flex-start; } } /* Le libellé long sur grand écran, le libellé court sur petit — jamais les deux annoncés : `display:none` sort aussi de l'arbre d'accessibilité. */ .lbl-court { display: none; } @media (max-width: 560px) { .lbl-long { display: none; } .lbl-court { display: inline; } } /* --- LE WORDMARK V5 : « le point devient partners » (validé 06/08) --------- */ .wm { display: inline-flex; align-items: center; gap: var(--e-3); text-decoration: none; } .wm img { width: 34px; height: auto; } .wm b { font-family: var(--f-titre); font-weight: 600; font-size: 26px; letter-spacing: -.01em; color: var(--encre); white-space: nowrap; } .wm i { font-style: normal; font-family: var(--f-titre); font-weight: 600; font-size: 15px; letter-spacing: .05em; color: var(--marque); transform: skewX(-10deg); display: inline-block; margin-left: var(--e-2); } .section--sombre .wm b, .foot .wm b { color: #fff; } .section--sombre .wm i, .foot .wm i { color: #9DBFAD; } /* ⚠️ LE PIÈGE CSS GRID, retrouvé ici le 09/08 (width-sweep : 769 px de débordement à toutes les largeurs mobiles). Une colonne de grille ne descend JAMAIS sous la largeur min-content de son contenu — et le bloc de code du hero est en `white-space: pre`, donc sa min-content vaut la plus longue ligne, 769 px. `min-width: 0` rend la colonne compressible et laisse le `overflow-x: auto` du bloc faire son travail. base.css le pose sur `.grid` ; toute grille MAISON doit le poser aussi. */ .hero__grid > *, .duo > *, .tiers > *, .steps > *, .facts > * { min-width: 0; } /* ------------------------------------------------------------ 2. Hero ----- */ .hero { padding-block: var(--e-10) var(--e-9); border-bottom: 1px solid var(--ligne); } .hero__grid { display: grid; gap: var(--e-8); align-items: start; } @media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: var(--e-9); } } .hero h1 { margin-bottom: var(--e-5); } .hero .lead { margin-bottom: var(--e-6); max-width: 54ch; } .hero__act { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; } .hero__act .note { font-size: var(--fs-small); color: var(--encre-2); } /* La ligne d'exclusions — le désamorçage. Trois refus, en filets. */ .excl { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--e-7); border-top: 1px solid var(--ligne); } .excl li { flex: 1 1 200px; padding: var(--e-4) var(--e-5) var(--e-4) 0; font-size: var(--fs-small); color: var(--encre-2); max-width: none; } .excl li b { color: var(--encre); display: block; font-family: var(--f-titre); font-weight: 600; font-size: 17px; margin-bottom: var(--e-1); } /* ------------------------------------------- 3. LE BLOC DE MESURE (signature) */ /* Le composant qui n'existe nulle part ailleurs sur ce marché : le livrable lui-même, montré. Réf. D03 (Level Access montre son produit, pas une illustration) + D01 (aucune photo d'ambiance). Données RÉELLES uniquement. */ .scan { border: 1px solid var(--encre); border-radius: var(--r-bloc); background: var(--fond); overflow: hidden; box-shadow: var(--sh-2); } .scan__hd { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-3) var(--e-4); background: var(--sombre); color: #fff; font-family: var(--f-chiffre); font-size: 15px; letter-spacing: .02em; } .scan__hd .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; } .scan__hd .meta { margin-left: auto; color: #9DBFAD; font-size: 15px; } .scan__row { display: flex; align-items: baseline; gap: var(--e-4); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--ligne); } .scan__row:last-child { border-bottom: 0; } .scan__n { font-family: var(--f-chiffre); font-weight: 700; font-size: 22px; color: var(--marque); min-width: 66px; font-variant-numeric: tabular-nums; } .scan__t { font-size: var(--fs-small); color: var(--encre); max-width: none; } .scan__t span { display: block; color: var(--encre-2); font-size: 15px; margin-top: var(--e-1); } .scan__code { padding: var(--e-4); background: var(--surface); border-top: 1px solid var(--ligne); font-family: var(--f-chiffre); font-size: 15px; line-height: 1.8; overflow-x: auto; white-space: pre; color: var(--encre); } .scan__code .del { color: var(--danger); } .scan__code .add { color: var(--marque); } .scan__ft { padding: var(--e-3) var(--e-4); border-top: 1px solid var(--ligne); font-size: 15px; color: var(--encre-2); } /* ------------------------------------------------- 4. Bande de faits ------ */ .facts { display: grid; gap: var(--e-6); } @media (min-width: 768px) { .facts { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--e-8); } } .facts > div { border-left: 2px solid var(--ligne-nuit); padding-left: var(--e-5); } .facts b { display: block; font-family: var(--f-chiffre); font-weight: 700; font-size: clamp(34px, 4.4vw, 46px); line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; margin-bottom: var(--e-2); } .facts .hi b { color: var(--accent); } /* 1 seul emploi de l'ambre */ .facts p { color: rgb(255 255 255 / .84); font-size: var(--fs-small); } .facts cite { display: block; font-style: normal; font-size: 15px; color: #9DBFAD; margin-top: var(--e-2); } /* --------------------------------------------------------- 5. L'offre ----- */ .tiers { display: grid; gap: var(--e-5); align-items: stretch; } @media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, minmax(0,1fr)); } } .tier { display: flex; flex-direction: column; border: 1px solid var(--ligne); border-radius: var(--r-bloc); background: var(--fond); padding: var(--e-6); } .tier--main { border: 2px solid var(--marque); } .tier .label { color: var(--marque); margin-bottom: var(--e-3); } .tier h3 { margin-top: 0; margin-bottom: var(--e-2); } .tier .px { font-family: var(--f-chiffre); font-weight: 700; font-size: 38px; line-height: 1.1; color: var(--encre); margin-block: var(--e-3) var(--e-1); font-variant-numeric: tabular-nums; } .tier .px small { font-size: 17px; font-weight: 500; color: var(--encre-2); } .tier .ref { font-size: 15px; color: var(--encre-2); margin-bottom: var(--e-4); } .tier ul { margin: 0 0 var(--e-5); padding: 0; list-style: none; display: grid; gap: var(--e-2); } .tier li { position: relative; padding-left: var(--e-5); font-size: var(--fs-small); color: var(--encre); max-width: none; } .tier li::before { content: ""; position: absolute; left: 0; top: .68em; width: 10px; height: 1px; background: var(--marque); } .tier .btn { margin-top: auto; } /* ------------------------------------------------------- 6. Le process ---- */ .steps { display: grid; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--r-bloc); overflow: hidden; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(4, minmax(0,1fr)); } } .steps > div { background: var(--fond); padding: var(--e-5); } .steps .n { font-family: var(--f-chiffre); font-size: 15px; font-weight: 700; color: var(--marque); letter-spacing: .08em; display: block; margin-bottom: var(--e-3); } .steps h3 { font-size: 19px; margin: 0 0 var(--e-2); } .steps p { font-size: var(--fs-small); color: var(--encre-2); } /* ------------------------------------------------- 7. Deux colonnes ------- */ .duo { display: grid; gap: var(--e-8); } @media (min-width: 900px) { .duo { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--e-9); } } .duo--serre { gap: var(--e-6); } /* Les limites avouées : une liste de refus, en encart bordé */ .limits { border-left: 3px solid var(--accent); padding-left: var(--e-5); } .limits li { padding-block: var(--e-2); font-size: var(--fs-small); color: var(--encre); max-width: none; } .limits li b { display: block; font-weight: 700; } /* --------------------------------------------------------- 8. La FAQ ----- */ .faq { border-top: 1px solid var(--ligne); } .faq details { border-bottom: 1px solid var(--ligne); } .faq summary { cursor: pointer; list-style: none; padding: var(--e-5) var(--e-8) var(--e-5) 0; font-family: var(--f-titre); font-weight: 600; font-size: 19px; position: relative; min-height: var(--min-cible); display: flex; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: var(--e-3); top: 50%; width: 11px; height: 11px; margin-top: -6px; border-right: 2px solid var(--marque); border-bottom: 2px solid var(--marque); transform: rotate(45deg); transition: transform var(--d-etat) var(--ease-sortie); } .faq details[open] summary::after { transform: rotate(-135deg); } .faq details > div { padding-bottom: var(--e-5); } /* ------------------------------------------------------- 9. Le pied ------- */ /* `overflow: hidden` n'est pas décoratif : le halo pulsant du CTA déborde volontairement du bouton (inset -55 %) et créait 8 px de scroll horizontal à 320 px. On le confine au pied plutôt que de rétrécir le halo. */ .foot { background: var(--sombre); color: rgb(255 255 255 / .80); padding-block: var(--e-9) var(--e-6); overflow: hidden; } .foot a:not(.btn) { color: #fff; } /* voir la note de spécificité en §1 */ .foot__grid { display: grid; gap: var(--e-7); } @media (min-width: 768px) { .foot__grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); } } .foot h2 { font-size: 21px; color: #fff; margin: 0 0 var(--e-3); } .foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-3); } .foot li { font-size: var(--fs-small); max-width: none; } .foot address { font-style: normal; font-size: var(--fs-small); line-height: 1.7; } .foot__bas { margin-top: var(--e-8); padding-top: var(--e-5); border-top: 1px solid var(--ligne-nuit); display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: space-between; font-size: 15px; color: rgb(255 255 255 / .70); } .foot__bas a { color: rgb(255 255 255 / .9); } /* Le filet français : un client Krescia égaré doit retrouver son espace. */ .foot__fr { font-size: 15px; color: rgb(255 255 255 / .70); } /* ------------------------------------------------------ 10. Utilitaires --- */ /* ============================================================================ 11. LE MOUVEMENT Écrit d'après 09-bible-web/02-animations.md — table de décision §14, une animation par section, transform et opacity uniquement, tout meurt sous `prefers-reduced-motion` (règle globale de base.css). Les classes de repos ne s'appliquent QUE sous `.js` : sans JavaScript, rien n'est masqué et la page reste identique. ============================================================================ */ /* --- Transitions de page natives (§8.1) : deux lignes, gratuites, fallback nul */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: .22s var(--ease-sortie) both vtOut; } ::view-transition-new(root) { animation: .32s var(--ease-sortie) both vtIn; } @keyframes vtOut { to { opacity: 0 } } @keyframes vtIn { from { opacity: 0 } } /* --- Barre de progression de lecture (§5.1) — CSS pur, piloté par le scroll */ .prog { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: var(--marque); transform-origin: left; transform: scaleX(0); } @supports (animation-timeline: scroll()) { .prog { animation: progGrow linear both; animation-timeline: scroll(root block); } } @keyframes progGrow { from { transform: scaleX(0) } to { transform: scaleX(1) } } /* --- R14 · SPLIT TEXT par mot sur le H1 (l'effet premium n°1, §4) ---------- */ /* ⚠️ `white-space: pre` n'est pas un détail. reveal.js met l'espace À L'INTÉRIEUR du span ; or un espace en fin d'inline-block est supprimé par le navigateur — le titre sortait « Webaccessibility remediation, doneinthetheme. » (constaté à la capture du 09/08). `pre` préserve cet espace ; les spans restant des inline-blocks, la ligne casse toujours entre les mots. */ .js .split span { display: inline-block; white-space: pre; opacity: 0; transform: translateY(.42em); transition: opacity .5s var(--ease-expo), transform .5s var(--ease-expo); transition-delay: var(--d, 0ms); } .js [data-reveal].is-in .split span { opacity: 1; transform: none; } /* --- R15 · le soulignage qui pousse sous LE chiffre (jamais de compteur) --- */ .souligne { position: relative; display: inline-block; } .souligne::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-expo) .25s; } .js [data-reveal].is-in .souligne::after { transform: scaleX(1); } /* --- R10 · le trait qui relie les étapes du process ------------------------ */ .steps { position: relative; } @media (min-width: 768px) { .steps::before { content: ""; position: absolute; left: 0; right: 0; top: 52px; height: 2px; background: var(--marque); opacity: .28; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-expo) .15s; z-index: 1; } .js [data-reveal].is-in .steps::before { transform: scaleX(1); } /* sans JS le trait doit être là : on ne masque que sous .js */ html:not(.js) .steps::before { transform: scaleX(1); } } /* --- A11 · l'indicateur de scroll au bas du hero --------------------------- */ .hint { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--fs-small); color: var(--encre-2); margin-top: var(--e-7); } .hint svg { animation: nudge 1.7s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: translateY(0); opacity: .55 } 50% { transform: translateY(6px); opacity: 1 } } /* --- A02 · le halo qui respire derrière le CTA final ----------------------- */ .halo { position: relative; isolation: isolate; display: inline-flex; } .halo::before { content: ""; position: absolute; inset: -55%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgb(245 166 35 / .38), transparent 68%); animation: respire 7s ease-in-out infinite; } @keyframes respire { 0%, 100% { opacity: .3; transform: scale(.9) } 50% { opacity: .6; transform: scale(1.07) } } /* --- A01 · le bandeau défilant : NOTRE zone d'intervention ----------------- */ /* Règle 7 de la bible : l'animation sert le SENS du métier. Ici ce ne sont pas des particules décoratives — ce sont les plateformes sur lesquelles on intervient réellement, l'équivalent de la « zone d'intervention » d'un artisan. ⚠️ Les marques sont en MONOCHROME et le bandeau est ÉTIQUETÉ : un mur de logos couleur se lit comme un mur de clients, et nous n'en avons pas encore (règle absolue de faits.md). */ /* ⚠️ Quatre réparations, dans l'ordre où elles se voyaient à la capture du 09/08 : ① la piste porte 16 SVG = 2 × 8 marques, sinon `-50%` ne retombe pas sur le même logo et la duplication saute à l'œil ; ② masque de fondu aux deux bords, sinon les logos sont tranchés net ; ③ hauteur par FAMILLE de logo, pas hauteur unique : un disque plein pèse deux fois un logotype linéaire à hauteur égale — l'égalité mathématique produit l'inégalité optique ; ④ encre pleine à 100 % d'opacité : « discret » se règle par la COULEUR, jamais par la transparence, qui ne fait que délaver. */ .mq { overflow: hidden; border-block: 1px solid var(--ligne); padding-block: var(--e-5); background: var(--surface); /* contraste de densité : la bande cesse d'être du blanc posé sur du blanc */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent); mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent); } .mq__lab { display: block; text-align: center; margin-bottom: var(--e-4); font-size: 15px; color: var(--encre-2); } .mq__lab b { color: var(--encre); font-weight: 600; } .mq__t { display: flex; align-items: center; gap: var(--e-10); width: max-content; animation: defile 44s linear infinite; } .mq:hover .mq__t, .mq:focus-within .mq__t { animation-play-state: paused; } .mq svg { width: auto; flex: none; fill: #5A6560; /* 5,1:1 sur --surface : lisible, pas délavé */ opacity: 1; transition: fill var(--d-micro); } .mq svg:hover { fill: var(--marque); } .mq svg:nth-child(8n+1) { height: 26px; } /* Shopify — sac plein */ .mq svg:nth-child(8n+2) { height: 25px; } /* WordPress — disque plein */ /* WooCommerce : son dessin n'occupe qu'un cinquième de la hauteur de son viewBox 24×24 (le logotype est une bande horizontale). À hauteur « normale » il rend un trait de 3 px et disparaît — constaté à la capture. On compense sur la BOÎTE. */ .mq svg:nth-child(8n+3) { height: 46px; } /* WooCommerce — logotype très large */ .mq svg:nth-child(8n+4) { height: 21px; } /* Webflow — logotype large */ .mq svg:nth-child(8n+5) { height: 26px; } /* Squarespace — monogramme */ .mq svg:nth-child(8n+6) { height: 20px; } /* Wix — logotype */ .mq svg:nth-child(8n+7) { height: 25px; } /* Elementor — disque plein */ .mq svg:nth-child(8n+0) { height: 26px; } /* BigCommerce — monogramme */ @keyframes defile { to { transform: translateX(-50%) } } /* Le mouvement n'est jamais obligatoire : sous reduced-motion la piste s'arrête et se recentre, elle ne reste pas figée sur une position arbitraire. */ @media (prefers-reduced-motion: reduce) { .mq__t { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: var(--e-6) var(--e-8); } .mq { -webkit-mask-image: none; mask-image: none; } } /* --- §4 · LE MIROIR — la section où le lecteur se reconnaît ---------------- */ /* « Décrire, jamais diagnostiquer. » C'est la section qui manquait et qui rendait la page froide : elle n'attaquait jamais la situation vécue du lecteur. */ .miroir { max-width: 60ch; } .miroir p { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.45; color: var(--encre); } .miroir p + p { margin-top: var(--e-5); } .miroir .apres { font-size: var(--fs-body); color: var(--encre-2); max-width: 62ch; } /* --- §13 · AVANT / APRÈS — ce qu'un lecteur d'écran annonce ---------------- */ /* Le comparateur natif de la bible, détourné du visuel vers l'AUDIO : la seule preuve honnête qu'on puisse montrer aujourd'hui, puisqu'on n'a pas encore de chantier client à exposer. Données réelles, domaine retiré. */ .ba { border: 1px solid var(--encre); border-radius: var(--r-bloc); background: var(--fond); overflow: hidden; } .ba__hd { padding: var(--e-3) var(--e-4); background: var(--sombre); color: #fff; font-family: var(--f-chiffre); font-size: 15px; display: flex; gap: var(--e-3); align-items: center; } .ba__hd .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; } .ba__zone { position: relative; } .ba__l { padding: var(--e-4); border-bottom: 1px solid var(--ligne); } .ba__l:last-of-type { border-bottom: 0; } .ba__l .q { font-size: 15px; color: var(--encre-2); display: block; margin-bottom: var(--e-2); } .ba__l .say { font-family: var(--f-chiffre); font-size: var(--fs-small); line-height: 1.6; display: block; padding: var(--e-3); border-left: 3px solid var(--danger); background: var(--surface); } .ba__l.ok .say { border-left-color: var(--marque); } .ba__ft { padding: var(--e-3) var(--e-4); border-top: 1px solid var(--ligne); font-size: 15px; color: var(--encre-2); } /* --- §10 · LA BARRE D'ACTION MOBILE --------------------------------------- */ /* base.css fournit `.callbar` (fixe en bas, masquée ≥768 px). Il manquait le dégagement sous le contenu, sinon elle recouvre le pied de page. */ @media (max-width: 767px) { body { padding-bottom: 78px; } .callbar { background: var(--sombre); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); } .callbar .btn { min-height: var(--min-cible); } } /* --- §7.1 · LE BOUTON DE RÉFÉRENCE : le balayage lumineux ------------------ */ /* base.css donne déjà le lift et l'ombre ; il manquait le « shine », qui est ce qui fait qu'un bouton a l'air cher pour 6 lignes de CSS. */ .btn { position: relative; overflow: hidden; } .btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-125%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .26), transparent); transition: transform .65s var(--ease-sortie); } .btn--secondaire::after { background: linear-gradient(90deg, transparent, rgb(12 90 55 / .10), transparent); } .btn:hover::after { transform: translateX(125%) skewX(-18deg); } /* --- H02 · le soulignage de nav qui pousse depuis la gauche ---------------- */ .hd nav a:not(.btn) { border-bottom: 0; position: relative; } .hd nav a:not(.btn)::after { content: ""; position: absolute; left: var(--e-1); right: var(--e-1); bottom: 10px; height: 2px; background: var(--marque); transform: scaleX(0); transform-origin: left; transition: transform var(--d-etat) var(--ease-expo); } .hd nav a:not(.btn):hover::after, .hd nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); } /* --- H07 · la bordure qui s'allume sur les cartes de prix ------------------ */ .tier { transition: border-color var(--d-micro), transform var(--d-etat) var(--ease-expo); } .tier:hover { border-color: var(--marque); transform: translateY(-3px); } /* --- H06 · la ligne de FAQ qui s'éclaire au survol ------------------------- */ .faq summary { transition: color var(--d-micro); } .faq summary:hover { color: var(--marque); } /* --- A06 · le dégradé qui respire sous la bande sombre --------------------- */ /* Une seule bande sombre par page : c'est là que vit l'animation ambiante. */ .section--sombre { position: relative; overflow: hidden; } .section--sombre::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 150%; z-index: 0; pointer-events: none; background: radial-gradient(60% 55% at 20% 30%, rgb(12 90 55 / .55), transparent 70%); animation: derive 18s ease-in-out infinite alternate; } .section--sombre > * { position: relative; z-index: 1; } @keyframes derive { from { transform: translate3d(-4%, -2%, 0) scale(1) } to { transform: translate3d(6%, 3%, 0) scale(1.12) } } /* Budget mobile (§12) : l'ambiance coûte cher pour rien sur un petit écran. */ @media (max-width: 768px) { .section--sombre::before { animation: none; } } .mesure { font-family: var(--f-chiffre); font-variant-numeric: tabular-nums; } .acc { color: var(--accent-txt); font-weight: 700; } /* ambre lisible sur clair */ .page-hd { padding-block: var(--e-9) var(--e-7); border-bottom: 1px solid var(--ligne); } .page-hd .label { color: var(--marque); margin-bottom: var(--e-3); } .cite { font-size: 15px; color: var(--encre-2); } .cite a { color: var(--marque); } code { font-family: var(--f-chiffre); font-size: .95em; } /* ============================================================================ §14 · LE COMPOSANT SIGNATURE — « la colonne qu'on remplit » Réf. biblio-secteur.md « Le composant signature » (D01 + D03) : sur ce marché le visuel qui vend est le LIVRABLE, pas une photo. D03 (Level Access) montre des captures produit ; nous n'avons pas encore de produit à capturer, donc on dessine la mesure elle-même. L'idée : la moitié droite du tableau est vide, et c'est le travail vendu qui la remplit. Le défaut du site devient son sujet. ⚠️ Les barres ne portent QUE des valeurs calculées depuis faits.md. ============================================================================ */ .gauge { margin-top: var(--e-5); border: 1px solid var(--ligne); border-top: 2px solid var(--encre); border-radius: var(--r-bloc); background: var(--fond); } .gauge__hd { display: flex; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--ligne); font-family: var(--f-chiffre); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-2); } .gauge__hd span:last-child { color: var(--marque); } .gauge__row { display: grid; grid-template-columns: 1fr 92px 46px 84px; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--ligne); } .gauge__k { font-size: 15px; color: var(--encre); max-width: none; } .gauge__bar { display: block; height: 10px; background: var(--surface); border-radius: 1px; } .gauge__bar i { display: block; height: 100%; width: var(--v, 0%); background: var(--accent); border-radius: 1px; } .gauge__v { font-family: var(--f-chiffre); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--encre); text-align: right; } /* La cellule vide : hachurée, pas blanche — un vide DESSINÉ se lit comme un choix, un vide non dessiné se lit comme un bug. C'est toute la différence du site. */ .gauge__after { display: block; height: 26px; border: 1px dashed var(--ligne); border-radius: 1px; background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--surface) 5px 10px); } .gauge__ft { padding: var(--e-3) var(--e-4); font-size: 15px; color: var(--encre-2); max-width: none; } @media (max-width: 520px) { .gauge__row { grid-template-columns: 1fr 60px 44px; } .gauge__after { display: none; } .gauge__hd span:last-child { display: none; } } /* La barre se remplit à l'arrivée dans l'écran — l'animation SIGNIFIE la mesure (bible 02-animations : l'animation sert le sens du métier). Sans JS, pleine. */ .js .gauge__bar i { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-expo) .2s; } .js [data-reveal].is-in .gauge__bar i { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .js .gauge__bar i { transform: none; transition: none; } } /* ============================================================================ §15 · LE FORMULAIRE DU PREMIER PAS Il remplace un `mailto:`. Deux champs et rien d'autre : chaque champ ajouté coûte des demandes, et on n'a besoin que de l'adresse du site et de celle où renvoyer le relevé. Le reste se dit dans le mail de réponse, par un humain. ============================================================================ */ .scanform { display: grid; gap: var(--e-3); max-width: 30rem; } @media (min-width: 560px) { .scanform { grid-template-columns: 1fr 1fr; align-items: end; } .scanform > button { grid-column: 1 / -1; justify-self: start; } .scanform > .scanform__msg, .scanform > .note { grid-column: 1 / -1; } } .scanform__ch { display: grid; gap: 6px; } .scanform label { font-family: var(--f-chiffre); font-size: 15px; letter-spacing: .03em; text-transform: uppercase; color: var(--encre-2); } .scanform input { font: inherit; font-size: var(--fs-small); color: var(--encre); padding: 12px 14px; min-height: var(--min-cible); background: var(--fond); border: 1px solid var(--encre); border-radius: var(--r-cta); transition: box-shadow var(--d-micro), border-color var(--d-micro); } .scanform input::placeholder { color: #767f7a; } .scanform input:focus-visible { outline: none; border-color: var(--marque); box-shadow: 0 0 0 3px rgb(12 90 55 / .18); } .scanform input[aria-invalid="true"] { border-color: var(--danger); } .scanform .note { margin-top: var(--e-2); } /* Le piège à robots : hors écran, jamais `display:none` (certains remplisseurs automatiques ignorent ce qui est masqué ainsi). */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .scanform__msg { font-size: var(--fs-small); margin: 0; } .scanform__msg:empty { display: none; } .scanform__msg[data-etat="ko"] { color: var(--danger); } .scanform__msg[data-etat="ok"] { color: var(--marque); font-weight: 600; } /* L'adresse écrite sous le CTA du pied de page. Un `mailto:` qui n'ouvre rien fait perdre le visiteur SANS QUE PERSONNE NE LE SACHE — c'est le pire mode de panne d'un site. L'adresse en clair est le filet ; le bouton de copie n'est qu'un confort, et la page reste entière sans lui et sans JavaScript. */ .adr { margin-top: var(--e-3); font-size: var(--fs-small); color: rgb(255 255 255 / .74); } .adr a { color: #fff; } .copie { margin-left: var(--e-2); padding: 4px 10px; font: inherit; font-size: 15px; line-height: 1.4; color: #fff; background: transparent; border: 1px solid rgb(255 255 255 / .38); border-radius: var(--r-cta); cursor: pointer; transition: background var(--d-micro), border-color var(--d-micro); } .copie:hover { background: rgb(255 255 255 / .12); border-color: #fff; } .copie[data-fait] { border-color: var(--accent); color: var(--accent); } /* La mécanique de la marque blanche : une liste de définition, pas des cards. Réf. D02 accessible.org — leur force est de répondre en une ligne, sans décor. Le filet vert à gauche dit « ceci est un engagement », pas un argument. */ .mech { border-left: 2px solid var(--marque); padding-left: var(--e-4); } .mech .label { margin-bottom: var(--e-3); } .mech dl { display: grid; gap: var(--e-3); margin: 0; } .mech dt { font-family: var(--f-chiffre); font-size: 15px; letter-spacing: .03em; text-transform: uppercase; color: var(--encre-2); } .mech dd { margin: 2px 0 0; font-size: 16px; color: var(--encre); max-width: 46ch; } /* Le tableau du livrable, posé DANS une carte .scan : il faut rentrer le tableau dans la carte (base.css lui donne une marge basse) et faire de la colonne « after » un vide LISIBLE — c'est le même parti que .gauge__after. */ .scan--doc table { margin: 0; } .scan--doc th, .scan--doc td { padding: var(--e-3) var(--e-4); font-size: 15px; } .scan--doc thead th { font-family: var(--f-chiffre); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-2); font-weight: 500; } .scan--doc tbody th { font-weight: 500; color: var(--encre); } .scan--doc td { font-family: var(--f-chiffre); font-variant-numeric: tabular-nums; } .scan--doc td:last-child { color: var(--encre-2); text-align: center; } .scan--doc thead th:last-child { color: var(--marque); } /* La source d'un chiffre, posée sous le chiffre — jamais en note de bas de page : un acheteur qui vérifie ne doit pas avoir à chercher d'où sort la donnée. */ .src { display: block; margin-top: var(--e-2); font-family: var(--f-chiffre); font-size: 15px; font-style: normal; color: var(--encre-2); } /* Garde-fou : toute liste posee DANS un composant maison perd la puce native. `ul[class]` de base.css ne couvre pas les