/** * PaieCheck — feuille de style de l'application * Emplacement : /var/www/fiche-paie.fr/public/paiecheck/assets/css/paiecheck.css * Permissions : 0644 * * Chargée APRÈS les feuilles du site (tokens, fonts, utilities, style, * navigation, footer…) par le fragment public/paiecheck/index.php : les * couleurs et familles viennent des tokens du site (--gp-*), avec valeur de * repli identique au token. Versionnée par PAIECHECK_ASSETS_VERSION * (config.php) — INCRÉMENTER LA CONSTANTE À CHAQUE MODIFICATION DE CE FICHIER. * * COHABITATION AVEC LA FEUILLE DU SITE (correctif du 27/07/2026) : * l'application vit désormais DANS le gabarit commun, à côté de l'en-tête, de * la navigation et du pied de page du site. AUCUNE règle de ce fichier ne * cible un élément global : tout est enfermé sous .pc-scene / .pc-app ou * sous un sélecteur préfixé .pc-*. Les jetons locaux sont posés sur * .pc-scene et .pc-app (et non sur :root) — ils restent hérités par tout le * parcours sans exister ailleurs dans la page. Cette feuille ne peut donc ni * surcharger la feuille du site, ni en être écrasée sur ses propres * sélecteurs. * * STRUCTURE DE PAGE (27/07/2026 au soir) : .pc-scene (fond de marque — * aplat, disques coupés, trames de pois) > .pc-decor (formes) + .pc-app * (la carte blanche du parcours, au-dessus). Les formes vivent dans la * scène, JAMAIS dans la carte. * * Doctrine couleur du parcours (révisée le 27/07/2026 avec la scène de * marque et le parcours de démonstration) : * - bleu marine : structure, texte fort, en-têtes, boutons secondaires, * bandeau du net à payer ; * - turquoise : action, scan, accents, bandeau de la section Rémunération ; * - jaune chaud (--pc-jaune, orange clair du site) : le bouton d'analyse * payante (.pc-cta) et le halo du bloc d'offre — et, depuis le * 28/07/2026, les gestes payants de la fenêtre des formules (bouton du * pack, étiquette « Le plus choisi ») ; * - famille --gp-jaune-* (ambre) : mention manquante, bandeau de la * section Totaux, troisième couleur du liseré de la feuille, bandeau * « Exemple de démonstration » ; * - ORANGE DE MARQUE (--gp-orange) : une seule apparition dans toute la * page — le disque coupé en bas à droite de la scène de fond ; * - vert / rouge : conforme, anomalie (le rouge signe aussi le pôle * « Erreur manifeste » et l'identité du document PDF de la démonstration) ; * - gris neutre : contrôle non effectué (info) — jamais présenté en défaut ; * - bleu primaire (--pc-action) : pôle « Point d'attention » de la * restitution — un conseil, jamais un défaut. * * Les données du bulletin sont en chasse fixe, alignées à droite, chiffres * tabulaires : un bulletin est un tableau de chiffres, l'alignement des * colonnes est une exigence de lisibilité. */ /* ================= JETONS LOCAUX (mappés sur les tokens du site) ========= Posés sur .pc-scene ET .pc-app — jamais sur :root : le parcours en hérite intégralement et aucune variable PaieCheck n'existe hors de ses conteneurs. La scène (correctif du 27/07/2026) a besoin des jetons pour colorer son fond et ses formes : les poser sur .pc-app seul les lui rendrait inaccessibles (.pc-app est un DESCENDANT de .pc-scene). Le doublon sur .pc-app est conservé à dessein : le parcours reste autonome si la carte devait un jour être servie hors de sa scène. .pc-modale (28/07/2026) porte AUSSI les jetons : les fenêtres modales sont re-parentées sous à l'amorçage (paiecheck.js) pour échapper au contexte d'empilement de .pc-app (z-index 1 — l'en-tête sticky du site, z-index 300, passait au-dessus du voile) ; hors de la carte, elles n'hériteraient plus de rien. */ .pc-scene, .pc-app, .pc-modale { --pc-marine: var(--gp-bleu-marine, #1e3760); --pc-action: var(--gp-bleu-primaire, #1d458c); --pc-turquoise: var(--gp-turquoise, #5ec5c8); --pc-turquoise-texte: #2e8f93; /* dérivé lisible du turquoise sur blanc */ --pc-jaune: var(--gp-orange-clair, #fbb03b); /* bouton payant uniquement */ --pc-jaune-hover: #fcc668; /* éclaircissement du même jaune */ --pc-vert: var(--gp-success, #10b981); --pc-vert-pale: var(--gp-success-pale, #d1fae5); --pc-rouge: var(--gp-error, #ef4444); --pc-ambre: var(--gp-jaune-bordure, #d4a017); --pc-ambre-texte: var(--gp-jaune-fonce, #b8860b); --pc-ambre-pale: var(--gp-jaune-pale, #fef9e7); --pc-gris: var(--gp-gris, #6b7280); --pc-fond: var(--gp-gris-clair, #f3f4f6); --pc-fond-pale: var(--gp-fond-pale, #fafcfe); --pc-papier: var(--gp-blanc, #ffffff); --pc-bordure: var(--gp-bordure, #e5e7eb); --pc-pastille: var(--gp-pastille, #e8f0fe); --pc-texte: #1f2937; /* Traits d'attente (squelette de lecture) et pointe du balayage lumineux */ --pc-squelette: #e8edf1; --pc-squelette-clair: #f2f6f8; /* ----------------------------------------------------------------- Habillage de l'écran de lecture (27/07/2026). Aucun jeton --gp-* n'existe pour ces nuances : elles sont DÉRIVÉES des jetons de marque par color-mix(), jamais recopiées en dur — si un jeton évolue, ces dérivés suivent. Signalé dans la note d'intervention. ----------------------------------------------------------------- */ /* Bandeau de la section Rémunération (fond) ; le texte réutilise --pc-turquoise-texte, dérivé lisible déjà en place ci-dessus */ --pc-turquoise-pale: color-mix(in srgb, var(--pc-turquoise) 16%, var(--pc-papier)); /* Disque coupé haut-droit du fond : turquoise très pâle mais opaque */ --pc-turquoise-voile: color-mix(in srgb, var(--pc-turquoise) 30%, var(--pc-papier)); /* Orange de marque : seule apparition à l'écran, disque bas-droit (même usage que le grand disque de la page d'accueil) */ --pc-orange: var(--gp-orange, #f7931e); --pc-orange-anneau: color-mix(in srgb, var(--gp-orange-clair, #fbb03b) 32%, var(--pc-papier)); /* Trames de pois du fond, discrètes mais opaques (pas de halo) */ --pc-pois-marine: color-mix(in srgb, var(--pc-marine) 24%, var(--pc-papier)); --pc-pois-turquoise: color-mix(in srgb, var(--pc-turquoise) 45%, var(--pc-papier)); /* Sous-totaux du bulletin : fond légèrement teinté de marine */ --pc-soustotal: color-mix(in srgb, var(--pc-marine) 5%, var(--pc-papier)); --pc-titres: var(--gp-font-titres, "Plus Jakarta Sans", sans-serif); --pc-ui: var(--gp-font-corps, "Inter", -apple-system, sans-serif); /* Chasse fixe système : aucune police tierce ajoutée */ --pc-data: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --pc-radius: var(--gp-radius-md, 8px); --pc-radius-lg: var(--gp-radius-lg, 12px); --pc-ombre: var(--gp-ombre-carte, 0 18px 44px rgba(30, 55, 96, .10)); --pc-tactile: var(--touch-target-min, 44px); --pc-duree: var(--gp-duree-ui, .3s); } /* ================= SOCLE (enfermé sous .pc-scene / .pc-app / .pc-modale) == */ .pc-scene, .pc-scene *, .pc-scene *::before, .pc-scene *::after, .pc-app, .pc-app *, .pc-app *::before, .pc-app *::after, .pc-modale, .pc-modale *, .pc-modale *::before, .pc-modale *::after { box-sizing: border-box; } /* L'attribut hidden doit l'emporter sur les display: flex/grid des classes. .pc-modale[hidden] est INDISPENSABLE : re-parentées sous , les fenêtres ne sont plus couvertes par .pc-app [hidden], et leur display: flex l'emporterait sur le [hidden] du navigateur. */ .pc-app [hidden] { display: none !important; } .pc-modale[hidden], .pc-modale [hidden] { display: none !important; } /* --------------------------------------------------------------------------- LA SCÈNE (correctif du 27/07/2026) — le fond de marque vit ICI, derrière la carte blanche, jamais dedans. La scène porte l'aplat gris-bleu clair uni, un rembourrage généreux (la bande propre où les formes s'expriment), un rayon d'angle et la découpe des formes. Le vocabulaire est celui de la bannière institutionnelle : aplats FRANCS et OPAQUES, coupés par les bords — aucun dégradé, aucune transparence, aucun halo. overflow: clip et non hidden : même découpe, mais sans créer de conteneur de défilement — le panneau latéral collant de l'écran de lecture (position: sticky) serait neutralisé par un ancêtre overflow: hidden. Le repli hidden couvre les navigateurs sans clip : ils ne perdent que le collage du panneau. --------------------------------------------------------------------------- */ .pc-scene { position: relative; max-width: 1500px; width: calc(100% - 24px); margin: 18px auto 34px; padding: 46px 30px 54px; background: var(--pc-fond); border-radius: 18px; overflow: hidden; overflow: clip; } /* Le décor est absolu DANS la scène ; la carte passe au-dessus (z-index). */ .pc-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .pc-forme { position: absolute; border-radius: 50%; } /* Chaque disque déborde franchement hors du cadre : seul un arc net reste visible, cantonné à son angle. Les arcs s'expriment dans le rembourrage de la scène et dans les bandes latérales ; la carte blanche, opaque et au-dessus, ne peut être atteinte. */ .pc-forme-turquoise-hg { width: 300px; height: 300px; background: var(--pc-turquoise); left: -150px; top: -160px; } .pc-forme-marine-bg { width: 260px; height: 260px; background: var(--pc-marine); left: -128px; bottom: -140px; } .pc-forme-pale-hd { width: 200px; height: 200px; background: var(--pc-turquoise-voile); right: -58px; top: -88px; } /* Bas-droit : l'anneau clair derrière le disque orange — SEULE apparition de l'orange de marque dans toute la page, en écho au disque de l'accueil */ .pc-forme-anneau-bd { width: 400px; height: 400px; background: var(--pc-orange-anneau); right: -168px; bottom: -188px; } .pc-forme-orange-bd { width: 300px; height: 300px; background: var(--pc-orange); right: -118px; bottom: -138px; } /* Deux trames de pois, discrètes : points opaques, dans les bandes haute et basse du rembourrage — jamais sous la carte. */ .pc-pois { position: absolute; background-image: radial-gradient(var(--pc-pois-marine) 1.6px, transparent 1.6px); background-size: 14px 14px; } .pc-pois-hd { right: 240px; top: 12px; width: 112px; height: 30px; } .pc-pois-bg { left: 200px; bottom: 16px; width: 90px; height: 30px; background-image: radial-gradient(var(--pc-pois-turquoise) 1.6px, transparent 1.6px); } /* La CARTE BLANCHE : le parcours entier flotte sur la scène. Son rembourrage d'antan (respiration vis-à-vis de la page) est repris par la scène. */ .pc-app { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0; font-family: var(--pc-ui); font-size: 15px; line-height: 1.55; color: var(--pc-texte); -webkit-font-smoothing: antialiased; } /* Écran de lecture actif : la colonne s'élargit pour accueillir la feuille au format page et le panneau latéral côte à côte (bureau). :has() est un confort progressif : sans lui, le parcours garde sa largeur d'origine et reste entièrement fonctionnel. */ .pc-app:has(.pc-vue-lecture.is-active) { max-width: 1280px; } .pc-cache { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .pc-app button { font: inherit; } /* Seuls les liens du parcours sont recolorés — pas ceux du site */ .pc-cgu a { color: var(--pc-action); } /* ================= MARQUE DE L'APPLICATION ================= Le logotype Fiche-Paie.fr est porté par l'en-tête du site : cette barre ne porte plus que la marque PaieCheck, qui identifie l'application à l'intérieur du site. */ .pc-marque-barre { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; background: var(--pc-papier); border: 1px solid var(--pc-bordure); border-radius: var(--pc-radius-lg) var(--pc-radius-lg) 0 0; padding: 14px 20px; } .pc-marque-baseline { font-size: 12px; font-weight: 600; color: var(--pc-gris); } .pc-marque { font-family: var(--pc-titres); font-weight: 800; font-size: 21px; letter-spacing: -.028em; white-space: nowrap; line-height: 1; } .pc-marque-prefixe { color: var(--pc-marine); } .pc-marque-suffixe { color: var(--pc-turquoise); } .pc-marque sup { font-size: var(--font-size-xs, .75rem); color: var(--pc-gris); font-weight: 600; margin-left: 1px; } /* ================= FIL D'ÉTAPES ================= */ .pc-etapes { display: flex; align-items: center; background: var(--pc-papier); border: 1px solid var(--pc-bordure); border-top: 0; padding: 14px 20px; } .pc-etape { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .pc-etape:last-child { flex: 0 0 auto; } .pc-etape-n { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--pc-bordure); color: var(--pc-gris); transition: background var(--pc-duree) ease, color var(--pc-duree) ease, transform var(--pc-duree) ease; } .pc-etape-l { font-size: 12.5px; font-weight: 600; color: var(--pc-gris); white-space: nowrap; transition: color var(--pc-duree) ease; } .pc-etape-ligne { flex: 1; height: 2px; background: var(--pc-bordure); margin: 0 10px; border-radius: 2px; overflow: hidden; } .pc-etape-ligne i { display: block; height: 100%; width: 0; background: var(--pc-turquoise); transition: width .6s ease; } .pc-etape.is-active .pc-etape-n { background: var(--pc-marine); color: #fff; transform: scale(1.12); } .pc-etape.is-active .pc-etape-l { color: var(--pc-marine); } .pc-etape.is-done .pc-etape-n { background: var(--pc-turquoise); color: #fff; } .pc-etape.is-done .pc-etape-l { color: var(--pc-turquoise-texte); } .pc-etape.is-done .pc-etape-ligne i { width: 100%; } /* ================= CORPS ET VUES ================= */ .pc-corps { position: relative; background: var(--pc-papier); border: 1px solid var(--pc-bordure); border-top: 0; border-radius: 0 0 var(--pc-radius-lg) var(--pc-radius-lg); padding: 26px 24px 30px; min-height: 460px; /* clip coupe comme hidden (entrée animée des vues, bandeau de la démonstration en pleine largeur) mais ne crée PAS de conteneur de défilement : indispensable au panneau latéral collant de l'écran de lecture (position: sticky serait neutralisé par un ancêtre overflow: hidden). Le repli hidden couvre les navigateurs sans clip — ils perdent seulement le collage du panneau. */ overflow: hidden; overflow: clip; box-shadow: var(--pc-ombre); } .pc-vue { display: none; } .pc-vue.is-active { display: block; animation: pcEntree .5s cubic-bezier(.2, .7, .3, 1) both; } @keyframes pcEntree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .pc-vue > * { position: relative; z-index: 1; } /* Le disque décoratif intérieur (.pc-disque) a été retiré le 27/07/2026 : un seul décor existe désormais, dans la scène, derrière la carte. */ .pc-kicker { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pc-gris); } .pc-titre { margin: 0 0 6px; font-family: var(--pc-titres); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--pc-marine); } .pc-sous-titre { margin: 0 0 22px; font-size: 13.5px; color: var(--pc-gris); } /* ================= BOUTONS ================= */ .pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--pc-tactile); padding: 11px 24px; border: none; border-radius: var(--pc-radius); font-size: 14px; font-weight: 650; cursor: pointer; text-decoration: none; transition: background var(--pc-duree) ease, transform .18s ease; } .pc-btn:focus-visible, .pc-cta:focus-visible, .pc-sso-btn:focus-visible { outline: 2.5px solid var(--pc-turquoise); outline-offset: 2px; } .pc-btn-marine { background: var(--pc-marine); color: #fff; } .pc-btn-marine:hover { background: var(--pc-action); } /* Bouton secondaire en contour : lance la démonstration sans jamais concurrencer le bouton plein du dépôt réel */ .pc-btn-contour { background: var(--pc-papier); color: var(--pc-marine); border: 1.5px solid var(--pc-marine); padding: 9.5px 22px; } .pc-btn-contour:hover { background: var(--pc-turquoise-pale); border-color: var(--pc-turquoise-texte); color: var(--pc-turquoise-texte); transform: translateY(-1px); } .pc-lien-retour { background: none; border: none; color: var(--pc-action); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; min-height: var(--pc-tactile); padding: 8px; } /* ================= ÉCRAN 1 : CONSIGNES ================= */ .pc-guide { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: center; } .pc-guide-demo { text-align: center; } .pc-feuille { position: relative; width: 150px; height: 200px; margin: 0 auto; } .pc-feuille-page { position: absolute; inset: 0; background: #fff; border: 1px solid var(--pc-bordure); border-radius: 5px; padding: 13px 12px; box-shadow: 0 5px 18px rgba(30, 55, 96, .14); transition: filter .55s ease, transform .55s ease; } .pc-feuille-fantome { position: absolute; inset: 0; background: #fff; border: 1px solid var(--pc-bordure); border-radius: 5px; opacity: 0; box-shadow: 0 5px 18px rgba(30, 55, 96, .14); transition: opacity .45s ease, transform .55s ease; } .pc-feuille-page b { display: block; height: 7px; background: var(--pc-marine); border-radius: 2px; width: 68%; margin-bottom: 4px; } .pc-feuille-page u { display: block; height: 4px; background: var(--pc-bordure); border-radius: 2px; width: 46%; margin-bottom: 11px; } .pc-feuille-page s { display: block; height: 3px; background: #edf1f4; border-radius: 2px; margin-bottom: 6px; text-decoration: none; } .pc-feuille-caviard { position: absolute; top: 13px; left: 12px; width: 68%; height: 17px; background: #16233f; border-radius: 2px; opacity: 0; transform: scaleX(.15); transform-origin: left; transition: opacity .3s ease, transform .45s ease; } .pc-feuille-coupe { position: absolute; left: -1px; right: -1px; bottom: -1px; height: 0; background: var(--pc-papier); border-top: 2px dashed var(--pc-rouge); opacity: 0; transition: height .5s ease, opacity .3s ease; } .pc-guide[data-cas="flou"] .pc-feuille-page { filter: blur(3.2px); } .pc-guide[data-cas="masque"] .pc-feuille-caviard { opacity: 1; transform: scaleX(1); } .pc-guide[data-cas="coupe"] .pc-feuille-coupe { height: 72px; opacity: 1; } .pc-guide[data-cas="double"] .pc-feuille-fantome { opacity: 1; transform: rotate(-7deg) translate(-16px, 9px); } .pc-guide[data-cas="double"] .pc-feuille-page { transform: rotate(3deg) translate(9px, -4px); } .pc-verdict { margin: 16px auto 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 650; width: fit-content; background: rgba(239, 68, 68, .10); color: var(--pc-rouge); transition: background .35s ease, color .35s ease; } .pc-guide[data-cas="ok"] .pc-verdict { background: var(--pc-vert-pale); color: var(--pc-vert); } .pc-verdict-ic { display: inline-flex; } .pc-regles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pc-regle { display: grid; grid-template-columns: 20px 1fr; gap: 11px; padding: 11px 13px; border-radius: 9px; background: var(--pc-fond-pale); border-left: 3px solid transparent; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease; } .pc-regle.is-active { background: #fff; border-left-color: var(--pc-turquoise); box-shadow: 0 5px 16px rgba(30, 55, 96, .09); transform: translateX(3px); } .pc-regle svg { color: var(--pc-gris); margin-top: 1px; transition: color .3s ease; } .pc-regle.is-active svg { color: var(--pc-turquoise-texte); } .pc-regle h3 { margin: 0 0 1px; font-size: 12.5px; font-weight: 650; color: var(--pc-texte); } .pc-regle p { margin: 0; font-size: 11.5px; color: var(--pc-gris); } .pc-consignes-pied { margin-top: 24px; text-align: center; } .pc-gratuit-mention { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--pc-turquoise-texte); } /* Deux issues, sans passage obligé : dépôt réel (plein) et démonstration (contour). Le visiteur venu déposer n'est pas détourné. */ .pc-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .pc-ctas-note { margin: 12px 0 0; font-size: 11.5px; color: var(--pc-gris); } /* Annonce de la connexion : le visiteur ne doit pas la découvrir au dépôt */ .pc-connexion-annonce { margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; color: var(--pc-gris); width: fit-content; max-width: 100%; text-align: left; } .pc-connexion-annonce svg { color: var(--pc-marine); flex-shrink: 0; } /* ================= ÉCRAN 2 : DÉPÔT ================= */ .pc-zone-depot { border: 2px dashed var(--pc-bordure); border-radius: var(--pc-radius-lg); background: var(--pc-fond-pale); padding: 42px 24px; text-align: center; cursor: pointer; transition: border-color var(--pc-duree) ease, background var(--pc-duree) ease; } .pc-zone-depot:hover, .pc-zone-depot.is-survol, .pc-zone-depot:focus-visible { border-color: var(--pc-turquoise); background: rgba(94, 197, 200, .06); outline: none; } .pc-zone-ic { display: inline-flex; color: var(--pc-turquoise-texte); margin-bottom: 12px; } .pc-zone-depot h3 { margin: 0 0 5px; font-family: var(--pc-titres); font-size: 16.5px; font-weight: 650; color: var(--pc-marine); } .pc-zone-depot p { margin: 0; font-size: 12.5px; color: var(--pc-gris); } .pc-formats { display: flex; gap: 6px; justify-content: center; margin-top: 15px; flex-wrap: wrap; } .pc-format { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 4px 9px; border-radius: 5px; background: #fff; border: 1px solid var(--pc-bordure); color: var(--pc-gris); } .pc-garde { margin: 18px auto 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border-radius: var(--pc-radius); font-size: 12px; font-weight: 600; width: fit-content; background: rgba(94, 197, 200, .12); color: var(--pc-turquoise-texte); } .pc-erreur { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--pc-radius); background: rgba(239, 68, 68, .08); color: #b91c1c; font-size: 12.5px; font-weight: 600; } /* ================= ÉCRANS 3-4 : DOCUMENT + PANNEAU ================= */ /* Le fond de marque qui vivait ici (aplat + disques dans .pc-vue-lecture puis dans .pc-corps) a été DÉPLACÉ dans la scène le 27/07/2026 : les formes n'existent plus qu'une fois, derrière la carte blanche — voir le bloc « LA SCÈNE » en tête de feuille. L'écran de lecture garde un contenu propre : la feuille-document et le panneau posés sur la carte. */ /* ---------------- Grille : feuille + panneau ---------------- */ /* En pile par défaut : sous 1100 px, une feuille au format page se lit en pleine largeur — deux colonnes y feraient plier chaque libellé. */ .pc-duo { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; } /* Bureau large : la feuille au format page à gauche, le panneau à droite */ @media (min-width: 1100px) { .pc-duo { grid-template-columns: minmax(0, 760px) minmax(300px, 1fr); gap: 26px; } /* Le panneau reste visible au défilement d'une feuille plus haute que l'écran ; 88 px = hauteur de l'en-tête collant du site + marge */ .pc-lateral { position: sticky; top: 88px; } } /* --------------------------------------------------------------------------- LA FEUILLE — le bulletin reconstitué se lit comme un DOCUMENT Largeur de page (colonne 760 px), hauteur minimale proportionnée au A4, marges intérieures généreuses (ce qui distingue un document d'un tableau), ombre en plusieurs couches pour détacher la feuille du fond, et liseré de marque en tête aux trois couleurs du système. --------------------------------------------------------------------------- */ .pc-document { position: relative; background: var(--pc-papier); border-radius: 6px; /* Marges de page */ padding: 40px 44px 46px; overflow: hidden; box-shadow: 0 1px 2px color-mix(in srgb, var(--pc-marine) 6%, transparent), 0 10px 24px color-mix(in srgb, var(--pc-marine) 10%, transparent), var(--gp-ombre-bulletin, 0 22px 46px rgba(30, 55, 96, .14)); min-height: 880px; } /* Liseré de marque en tête de feuille : bandes franches, sans fondu — bleu marine, turquoise, puis le jaune de la famille --gp-jaune-* (l'orange de marque reste réservé au disque du fond) */ .pc-document::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--pc-marine) 0 38%, var(--pc-turquoise) 38% 72%, var(--pc-ambre) 72% 100%); } /* --------------------------------------------------------------------------- OCÉRISATION RENDUE VISIBLE — squelette d'attente La mise au net instantanée (flou puis document net d'un coup) a été supprimée le 27/07/2026 : le document reste un ensemble de traits gris parcourus d'un balayage lumineux, puis chaque valeur arrive en fondu croisé (voir « FONDU CROISÉ » plus bas). Le document est là, mais pas encore déchiffré. --------------------------------------------------------------------------- */ .pc-doc-squelette b, .pc-doc-squelette u, .pc-doc-squelette s { display: block; border-radius: 2px; text-decoration: none; } .pc-doc-squelette b { height: 9px; width: 55%; margin-bottom: 6px; background: var(--pc-marine); opacity: .35; } .pc-doc-squelette u { height: 5px; width: 38%; margin-bottom: 16px; background: var(--pc-bordure); } .pc-doc-squelette s { height: 6px; margin-bottom: 11px; background: var(--pc-squelette); } /* Balayage lumineux commun au squelette d'attente et aux traits de valeur */ .pc-doc-squelette s, .pc-doc-squelette u, .pc-v .pc-sk { background-image: linear-gradient(100deg, var(--pc-squelette) 30%, var(--pc-squelette-clair) 50%, var(--pc-squelette) 70%); background-size: 220% 100%; animation: pcBalayage 1.5s linear infinite; } @keyframes pcBalayage { from { background-position: 130% 0; } to { background-position: -30% 0; } } /* --------------------------------------------------------------------------- FONDU CROISÉ — le trait gris s'efface pendant que la valeur apparaît .pc-v porte la valeur dans le FLUX (elle occupe sa place définitive dès la construction, à opacité nulle) ; .pc-sk est superposé en position absolue, à la largeur mesurée de cette valeur. Rien ne se déplace au moment de la révélation : la mise en page ne saute pas, on lève simplement un voile. --------------------------------------------------------------------------- */ .pc-v { position: relative; display: block; min-height: 13px; } .pc-v .pc-sk { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 8px; max-width: 100%; border-radius: 3px; background: var(--pc-squelette); opacity: 1; transition: opacity .55s ease; pointer-events: none; } /* inline-block : la boîte du texte épouse la largeur RÉELLE de la donnée, c'est elle que le script mesure pour dimensionner le trait gris. Elle reste dans le flux : la place est réservée avant même que la valeur soit lisible. */ .pc-v .pc-tx { display: inline-block; max-width: 100%; opacity: 0; transition: opacity .85s ease; } .pc-v.est-revelee .pc-sk { opacity: 0; animation: none; } .pc-v.est-revelee .pc-tx { opacity: 1; } /* Colonnes de droite (taux, montants) : le trait s'aligne sur la donnée */ .pc-taux .pc-sk, .pc-montant .pc-sk, .pc-identite dd .pc-sk { left: auto; right: 0; } /* En-tête d'identité du bulletin reconstitué */ .pc-doc-entete { border-bottom: 2px solid var(--pc-marine); padding-bottom: 12px; margin-bottom: 14px; } .pc-doc-titre { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; color: var(--pc-marine); } .pc-identite { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; font-size: 11px; margin: 0; } .pc-identite div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dotted var(--pc-bordure); } .pc-identite dt { color: var(--pc-gris); } .pc-identite dd { margin: 0; font-family: var(--pc-data); font-weight: 600; text-align: right; } /* Provenance d'une donnée COMBLÉE par le répertoire SIRENE de l'INSEE (01/08/2026) : discrète, jamais confondue avec la valeur elle-même. Une donnée LUE sur le bulletin ne porte aucune marque — c'est le cas normal. */ .pc-src-enrichie { display: inline-block; margin-left: 6px; padding: 0 5px; font-family: inherit; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-gris); border: 1px solid var(--pc-bordure); border-radius: 4px; vertical-align: middle; white-space: nowrap; } /* --------------------------------------------------------------------------- BANDEAUX DE SECTION (27/07/2026) — chaque bloc du bulletin est annoncé par un bandeau coloré repris des jetons de marque : - Rémunération turquoise clair, texte turquoise foncé ; - Cotisations salariales bleu clair (--gp-pastille), texte bleu marine ; - Totaux jaune pâle, texte jaune foncé (--gp-jaune-*). Le document est généré par paiecheck.js en liste plate SANS classe de section (hors périmètre de cette intervention) : les sections sont donc reconnues par leur STRUCTURE, stable côté script — - le premier bandeau qui suit l'en-tête d'identité est « Rémunération » ; - tout bandeau précédé d'une ligne est bleu par défaut (« Cotisations salariales », « Cumuls annuels ») ; - « Totaux » est le bandeau dont le bloc se clôt sur le Net à payer (.is-total) à deux ou trois lignes de distance (net imposable, net social, prélèvement à la source facultatif), repéré par :has(). Si paiecheck.js évolue, poser des classes de section explicites à la construction du document et remplacer ces sélecteurs structurels — décrit dans la note d'intervention. Sans :has(), « Totaux » reste bleu : dégradé acceptable, rien n'est illisible. --------------------------------------------------------------------------- */ .pc-bloc-titre { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; margin: 22px 0 0; padding: 8px 12px; border-radius: 5px 5px 0 0; background: var(--pc-turquoise-pale); color: var(--pc-turquoise-texte); } .pc-bloc-titre::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pc-doc-contenu .pc-ligne ~ .pc-bloc-titre { background: var(--pc-pastille); color: var(--pc-marine); } .pc-doc-contenu .pc-ligne ~ .pc-bloc-titre:has(+ .pc-ligne + .pc-ligne + .pc-ligne.is-total), .pc-doc-contenu .pc-ligne ~ .pc-bloc-titre:has(+ .pc-ligne + .pc-ligne + .pc-ligne + .pc-ligne.is-total) { background: var(--pc-ambre-pale); color: var(--pc-ambre-texte); } .pc-ligne { display: grid; grid-template-columns: 22px 1fr 72px 92px; align-items: center; gap: 7px; padding: 5px 10px 5px 0; border-radius: 4px; font-size: 11.5px; transition: background .3s ease; } .pc-ligne + .pc-ligne { border-top: 1px solid #f4f7f9; } /* Lignes alternées, très légèrement — un souffle, pas un effet tableur. La parité est comptée sur les seules lignes (nth-child … of), les bandeaux et l'en-tête n'interrompent pas l'alternance. */ .pc-doc-contenu > .pc-ligne:nth-child(odd of .pc-ligne):not(.is-total):not(.is-allumee):not(.est-anomalie) { background: var(--pc-fond-pale); } .pc-ligne.is-allumee { background: rgba(94, 197, 200, .13); } /* Sous-totaux (« Salaire brut ») : fond légèrement teinté, filet supérieur */ .pc-ligne.is-total { font-weight: 700; background: var(--pc-soustotal); border-top: 1.5px solid var(--pc-action); margin-top: 5px; padding-top: 7px; padding-bottom: 7px; } .pc-ligne.is-total .pc-montant { color: var(--pc-marine); } /* Le NET À PAYER — dernière ligne de total du document — en bandeau bleu marine pleine largeur, texte blanc : c'est le chiffre que le client cherche en premier. Sans :has(), la ligne garde le style de sous-total. */ .pc-doc-contenu .pc-ligne.is-total:not(:has(~ .pc-ligne.is-total)) { background: var(--pc-marine); color: var(--gp-blanc, #ffffff); border-top: none; border-radius: 6px; margin-top: 14px; padding: 11px 12px 11px 0; font-size: 12.5px; } .pc-doc-contenu .pc-ligne.is-total:not(:has(~ .pc-ligne.is-total)) .pc-montant { color: var(--gp-blanc, #ffffff); font-size: 13.5px; } .pc-doc-contenu .pc-ligne.is-total:not(:has(~ .pc-ligne.is-total)) .pc-taux, .pc-doc-contenu .pc-ligne.is-total:not(:has(~ .pc-ligne.is-total)) .pc-absent { color: color-mix(in srgb, var(--gp-blanc, #ffffff) 62%, var(--pc-marine)); } /* Sur le bandeau marine, une marque colorée (dont l'« i » bleu d'un conseil) serait illisible : toute marque y passe en blanc — le verdict reste lisible dans les constats. Même règle que le rapport PDF. */ .pc-doc-contenu .pc-ligne.is-total:not(:has(~ .pc-ligne.is-total)) .pc-mk svg { color: var(--gp-blanc, #ffffff); } .pc-ligne.est-anomalie { background: rgba(239, 68, 68, .06); } .pc-ligne.est-anomalie .pc-montant { color: var(--pc-rouge); font-weight: 700; } .pc-taux, .pc-montant { font-family: var(--pc-data); text-align: right; font-size: 10.5px; font-variant-numeric: tabular-nums; } .pc-taux { color: var(--pc-gris); } .pc-absent { color: var(--pc-gris); font-weight: 500; font-style: italic; } /* Marques de verdict (analyse payée uniquement) */ .pc-mk { width: 16px; height: 16px; display: grid; place-items: center; } .pc-mk svg { opacity: 0; transform: scale(.4); transition: opacity .26s ease, transform .26s cubic-bezier(.34, 1.56, .64, 1); } .pc-mk.is-posee svg { opacity: 1; transform: none; } .pc-mk.ok svg { color: var(--pc-vert); } .pc-mk.ko svg { color: var(--pc-rouge); } .pc-mk.wr svg { color: var(--pc-ambre); } .pc-mk.info svg { color: var(--pc-gris); } /* Pôle « Point d'attention » (démonstration) : un conseil en bleu, jamais un défaut — distinct du gris « contrôle non effectué » */ .pc-mk.nf svg { color: var(--pc-action); } /* Barre de scan turquoise */ .pc-scan { position: absolute; left: 0; right: 0; top: 0; height: 76px; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, rgba(94, 197, 200, 0), rgba(94, 197, 200, .16) 60%, rgba(94, 197, 200, .24) 96%, rgba(94, 197, 200, 0)); border-bottom: 1.5px solid var(--pc-turquoise); box-shadow: 0 4px 20px rgba(94, 197, 200, .45); } .pc-scan.is-lancee { opacity: 1; animation: pcScan var(--pc-scan-duree, 5000ms) cubic-bezier(.42, 0, .58, 1) forwards; } @keyframes pcScan { from { transform: translateY(-76px); } to { transform: translateY(var(--pc-scan-fin, 620px)); } } /* ---------------- Panneau latéral ---------------- */ .pc-lateral { display: flex; flex-direction: column; gap: 12px; } .pc-carte { background: #fff; border: 1px solid var(--pc-bordure); border-radius: var(--pc-radius-lg); padding: 16px; } .pc-carte h3 { margin: 0 0 3px; font-family: var(--pc-titres); font-size: 13.5px; font-weight: 650; color: var(--pc-marine); } .pc-carte-texte { margin: 0; font-size: 11.5px; color: var(--pc-gris); } /* --------------------------------------------------------------------------- SPINNER DE MARQUE — le logotype Fiche-Paie.fr mis en mouvement Quatre barres verticales qui ondulent, alternées bleu marine et turquoise, décalées de 130 ms. Ce n'est pas un cercle interchangeable : c'est la marque qui occupe l'attente. Il tourne aussi longtemps qu'il le faut et ne promet jamais de fin — l'océrisation d'une photo prend jusqu'à une vingtaine de secondes, mesuré en production. --------------------------------------------------------------------------- */ .pc-attente { display: flex; align-items: center; gap: 13px; padding: 9px 0 3px; } .pc-spinner { display: flex; align-items: flex-end; gap: 3.5px; height: 30px; flex-shrink: 0; } .pc-spinner i { display: block; width: 5px; height: 26%; border-radius: 2.5px; background: var(--pc-marine); animation: pcOnde 1.15s ease-in-out infinite; } .pc-spinner i:nth-child(1) { animation-delay: 0s; } .pc-spinner i:nth-child(2) { background: var(--pc-turquoise); animation-delay: .13s; } .pc-spinner i:nth-child(3) { animation-delay: .26s; } .pc-spinner i:nth-child(4) { background: var(--pc-turquoise); animation-delay: .39s; } @keyframes pcOnde { 0%, 100% { height: 26%; opacity: .55; } 50% { height: 100%; opacity: 1; } } /* Repli textuel : n'existe QUE sous prefers-reduced-motion (voir plus bas) */ .pc-attente-texte { display: none; font-size: 12px; font-weight: 650; color: var(--pc-marine); } .pc-attente-libelles { display: block; min-width: 0; } .pc-attente-l { display: block; font-size: 12.5px; font-weight: 650; color: var(--pc-marine); } .pc-attente-s { display: block; font-size: 11.5px; color: var(--pc-gris); margin-top: 1px; } /* Fin de lecture : le spinner cède la place au constat */ .pc-lecture-faite { display: flex; align-items: center; gap: 8px; padding: 9px 0 3px; font-size: 12.5px; font-weight: 650; color: var(--pc-turquoise-texte); } .pc-lecture-faite svg { flex-shrink: 0; } .pc-progression { margin-top: 12px; height: 5px; background: var(--pc-bordure); border-radius: 3px; overflow: hidden; } .pc-progression i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pc-turquoise), var(--pc-turquoise-texte)); transition: width .4s ease; } .pc-progression-attente i { width: 40%; animation: pcNavette 1.4s ease-in-out infinite alternate; } @keyframes pcNavette { from { margin-left: -10%; } to { margin-left: 70%; } } .pc-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; } .pc-meta div { font-size: 10.5px; padding: 4px 9px; border-radius: 6px; background: var(--pc-fond); color: var(--pc-gris); font-weight: 600; display: flex; gap: 5px; } .pc-meta dt { margin: 0; } .pc-meta dd { margin: 0; color: var(--pc-marine); font-weight: 700; } /* Offre payante : le SEUL emplacement du jaune */ .pc-offre { background: linear-gradient(135deg, var(--pc-marine) 0%, var(--pc-action) 100%); border-radius: var(--pc-radius-lg); padding: 18px; color: #fff; position: relative; overflow: hidden; } .pc-offre::after { content: ''; position: absolute; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--pc-jaune-hover), var(--pc-jaune)); opacity: .22; right: -60px; bottom: -70px; } /* CORRECTIF 27/07/2026 — « Votre bulletin est bien lu » illisible en production : ce titre n'avait pas de couleur propre et le gabarit du site pose h1, h2, h3 { color: var(--gray-900) } (style.css), soit un texte sombre sur ce fond bleu marine. Blanc pur, explicitement. */ .pc-offre h3 { margin: 0 0 4px; font-family: var(--pc-titres); font-size: 15.5px; font-weight: 700; position: relative; color: var(--gp-blanc, #ffffff); } /* Paragraphe et mention : lisibles (contraste > 6:1 sur le marine) sans être aussi appuyés que le titre — couleurs explicites, déjà en place */ .pc-offre p { margin: 0 0 14px; font-size: 12px; color: #c9d6ea; position: relative; } .pc-cta { font-size: 14px; font-weight: 700; cursor: pointer; background: var(--pc-jaune); color: var(--pc-marine); border: none; width: 100%; min-height: var(--pc-tactile); padding: 12px 18px; border-radius: var(--pc-radius); position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; transition: transform .18s ease, background .18s ease; } .pc-cta:hover:not(:disabled) { background: var(--pc-jaune-hover); transform: translateY(-1px); } .pc-cta:disabled { cursor: not-allowed; opacity: .55; } .pc-cta .pc-prix { font-family: var(--pc-data); font-weight: 700; } .pc-offre-note { margin: 10px 0 0; font-size: 11px; color: #a7b8d4; text-align: center; position: relative; } /* ========================================================================= RESTITUTION UNIFIÉE (27/07/2026) — la démonstration est la référence : trois pôles chiffrés, score et niveau de risque, constats, carte PDF. Ces classes sont PARTAGÉES par la vue réelle (rapport payé) et la vue de démonstration : un seul habillage, deux vues. Nuances absentes des jetons dérivées par color-mix(), jamais recopiées. ========================================================================= */ /* Trois pôles de restitution, comptés séparément : erreur manifeste (rouge — anomaly), anomalie probable (ambre — signal_ia), point d'attention (bleu — un conseil, jamais un défaut). Un contrôle info n'alimente aucun pôle. */ .pc-poles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; } .pc-pole { text-align: center; padding: 11px 6px; border-radius: 9px; } .pc-pole b { display: block; font-family: var(--pc-data); font-size: 21px; font-weight: 700; line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; } .pc-pole span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.25; } .pc-pole.ko { background: color-mix(in srgb, var(--pc-rouge) 10%, var(--pc-papier)); color: var(--pc-rouge); } .pc-pole.ko span { color: color-mix(in srgb, var(--pc-rouge) 72%, var(--pc-texte)); } .pc-pole.wr { background: var(--pc-ambre-pale); color: var(--pc-ambre-texte); } .pc-pole.nf { background: var(--pc-pastille); color: var(--pc-action); } /* Score et niveau de risque, sous les pôles */ .pc-synthese-score { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pc-bordure); } .pc-synthese-score b { font-family: var(--pc-data); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--pc-marine); font-variant-numeric: tabular-nums; } .pc-synthese-score span { font-family: var(--pc-data); font-size: 13px; color: var(--pc-gris); } .pc-synthese-score em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--pc-ambre-pale); color: var(--pc-ambre-texte); } /* Carte du rapport PDF : identité de document PDF reconnaissable sans reproduire aucune marque déposée — feuille blanche à coin corné, badge « PDF », filet rouge, flèche de téléchargement. Le rouge vient du jeton d'erreur du site, pas d'une charte tierce. Dans la vue réelle c'est un LIEN (adresse de telechargement.php) ; dans la démonstration, une illustration. */ .pc-pdf { display: flex; align-items: center; gap: 13px; padding: 14px 15px; background: var(--pc-papier); border: 1px solid var(--pc-bordure); border-left: 4px solid var(--pc-rouge); border-radius: 9px; text-decoration: none; color: inherit; transition: border-color var(--pc-duree) ease, box-shadow var(--pc-duree) ease; } a.pc-pdf:hover, a.pc-pdf:focus-visible { border-color: var(--pc-rouge); box-shadow: 0 6px 18px rgba(30, 55, 96, .10); } .pc-pdf-ic { width: 38px; height: 46px; flex-shrink: 0; } /* Couleurs de l'icône : jetons uniquement (le coin corné est dérivé) */ .pc-pdf-ic .pc-pdf-feuille { fill: var(--pc-papier); stroke: var(--pc-bordure); } .pc-pdf-ic .pc-pdf-corne { fill: color-mix(in srgb, var(--pc-marine) 7%, var(--pc-papier)); } .pc-pdf-ic .pc-pdf-badge { fill: var(--pc-rouge); } .pc-pdf-ic .pc-pdf-libelle { fill: var(--pc-papier); } .pc-pdf b { display: block; font-size: 12.5px; font-weight: 680; color: var(--pc-texte); } .pc-pdf span { font-size: 11px; color: var(--pc-gris); } .pc-pdf-dl { margin-left: auto; color: var(--pc-rouge); flex-shrink: 0; } .pc-constats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pc-constat { display: grid; grid-template-columns: 18px 1fr; gap: 9px; opacity: 0; transform: translateX(8px); transition: opacity .4s ease, transform .4s ease; } .pc-constat.is-visible { opacity: 1; transform: none; } .pc-constat svg { margin-top: 1px; } .pc-constat.ok svg { color: var(--pc-vert); } .pc-constat.ko svg { color: var(--pc-rouge); } .pc-constat.wr svg { color: var(--pc-ambre); } .pc-constat.nf svg { color: var(--pc-action); } .pc-constat h4 { margin: 0 0 1px; font-size: 12px; font-weight: 650; color: var(--pc-texte); } .pc-constat p { margin: 0; font-size: 11.5px; color: var(--pc-gris); } /* Un contrôle « info » (non effectué) n'apparaît JAMAIS en constat : il n'alimente aucun pôle — sa marque grise ligne à ligne suffit. */ /* Mention de source des données d'entreprise (01/08/2026) : affichée UNE FOIS sous les constats, quand le répertoire SIRENE de l'INSEE a répondu. Argument de crédibilité — la vérification s'appuie sur une source officielle. Texte rédigé par le serveur, jamais réécrit par l'interface. */ .pc-source-sirene { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--pc-bordure); font-size: 10.5px; color: var(--pc-gris); } /* ========================================================================= APERÇU GRATUIT À 3 CONTRÔLES (31/07/2026) Carte du panneau latéral (#pcApercu), affichée avec l'offre à la fin de la reconstitution : les trois contrôles de la liste fermée du moteur (composant .pc-constat RÉUTILISÉ — coche verte / croix rouge / « i » gris : la doctrine couleur du parcours, un contrôle non effectué n'est jamais un défaut), le compteur, puis l'aperçu VERROUILLÉ des contrôles suivants : titres lisibles, contenu remplacé par des traits gris — le langage visuel du squelette de lecture (--pc-squelette), qui dit « pas encore révélé » sans jamais ressembler à un verdict — et un fondu vers le bas (voile blanc progressif, même papier que la carte) qui mène au bloc d'offre et à son bouton, juste en dessous. Le fondu est un voile FONCTIONNEL de premier plan, pas un décor de la scène : la doctrine « aplats francs sans dégradé » vaut pour les formes de .pc-scene. ========================================================================= */ .pc-apercu-liste { margin-top: 12px; } /* Statut « info » de l'aperçu : gris neutre, comme la marque ligne à ligne (.pc-mk.info) — un contrôle non effectué n'est jamais présenté en défaut. */ .pc-constat.info svg { color: var(--pc-gris); } .pc-apercu-compteur { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--pc-bordure); font-size: 11px; font-weight: 650; color: var(--pc-marine); } /* L'aperçu verrouillé : mêmes gabarits que les constats (grille 18px + 1fr, mêmes corps de titre), cadenas gris, traits d'attente à la place du contenu. Le bloc est rogné par le fondu — il SUGGÈRE la suite. */ .pc-apercu-verrou { position: relative; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; } .pc-verrou-item { display: grid; grid-template-columns: 18px 1fr; gap: 9px; } .pc-verrou-ic { color: var(--pc-gris); display: grid; place-items: start center; padding-top: 1px; } .pc-verrou-item h4 { margin: 0 0 4px; font-size: 12px; font-weight: 650; color: var(--pc-texte); } .pc-verrou-trait { display: block; height: 8px; border-radius: 4px; background: var(--pc-squelette); margin-bottom: 4px; } .pc-verrou-item .pc-verrou-trait:last-child { margin-bottom: 0; } /* Fondu vers le bas : voile du papier de la carte, au-dessus des derniers items — les titres du haut restent lisibles, la suite s'estompe. */ .pc-apercu-fondu { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(180deg, transparent 0%, var(--pc-papier) 88%); pointer-events: none; } /* Confirmation courriel */ .pc-courriel { display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: var(--pc-marine); border-radius: var(--pc-radius-lg); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; } .pc-courriel.is-visible { opacity: 1; transform: none; } .pc-courriel svg { color: var(--pc-turquoise); flex-shrink: 0; } .pc-courriel b { display: block; font-size: 12.5px; font-weight: 650; } .pc-courriel span { font-size: 11px; color: #a7b8d4; } /* ========================================================================= FENÊTRES MODALES (28/07/2026) — formules et doublon de pack. Le conteneur plein écran est le voile : un clic directement sur lui ferme la fenêtre (paiecheck.js — croix, extérieur, Échap, piège de focus). Jetons hérités de .pc-app (les fenêtres vivent DANS la carte) ; plans z-index du site (--z-modal). Aucun sélecteur global. ========================================================================= */ .pc-modale { position: fixed; inset: 0; z-index: var(--z-modal, 500); display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: color-mix(in srgb, var(--pc-marine) 62%, transparent); animation: pcModaleFond var(--pc-duree) ease both; } @keyframes pcModaleFond { from { opacity: 0; } to { opacity: 1; } } .pc-modale-carte { position: relative; width: 100%; max-width: 780px; max-height: 92vh; overflow: auto; background: var(--pc-papier); border-radius: var(--gp-radius-xl, 14px); box-shadow: var(--pc-ombre); padding: 34px 32px 26px; animation: pcModaleMonte .34s cubic-bezier(.2, .8, .3, 1) both; outline: none; } @keyframes pcModaleMonte { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } } .pc-modale-carte-etroite { max-width: 480px; text-align: center; } .pc-modale-fermer { position: absolute; top: 14px; right: 14px; width: var(--pc-tactile); height: var(--pc-tactile); display: grid; place-items: center; background: var(--pc-papier); border: 1px solid var(--pc-bordure); border-radius: var(--pc-radius); color: var(--pc-gris); cursor: pointer; transition: border-color var(--pc-duree) ease, color var(--pc-duree) ease; } .pc-modale-fermer:hover, .pc-modale-fermer:focus-visible { border-color: var(--pc-marine); color: var(--pc-marine); } .pc-modale-fermer:focus-visible { outline: 2.5px solid var(--pc-turquoise); outline-offset: 2px; } .pc-modale-tete { text-align: center; margin-bottom: 22px; } .pc-modale-tete h3 { margin: 0 0 5px; font-family: var(--pc-titres); font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--pc-marine); } .pc-modale-tete p { margin: 0; font-size: 13.5px; color: var(--pc-gris); } /* ---------------- La fenêtre des formules ---------------- */ .pc-formules-attente { text-align: center; font-size: 13px; color: var(--pc-gris); margin: 18px 0; } .pc-formules { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 700px; margin: 0 auto; } .pc-formule { position: relative; background: var(--pc-papier); border: 1.5px solid var(--pc-bordure); border-radius: var(--pc-radius-lg); padding: 22px; transition: border-color var(--pc-duree) ease, transform .18s ease, box-shadow var(--pc-duree) ease; } .pc-formule:hover { border-color: var(--pc-turquoise); transform: translateY(-2px); box-shadow: var(--pc-ombre); } /* Le pack de 3 est mis en avant : bordure appuyée et étiquette */ .pc-formule-reco { border: 2px solid var(--pc-marine); } .pc-formule-badge { position: absolute; top: -11px; left: 20px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; background: var(--pc-jaune); color: var(--pc-marine); padding: 4px 11px; border-radius: var(--gp-radius-pill, 20px); } .pc-formule h4 { margin: 0 0 3px; font-family: var(--pc-titres); font-size: 15.5px; font-weight: 700; color: var(--pc-texte); } .pc-formule-quoi { margin: 0 0 16px; font-size: 12px; color: var(--pc-gris); } .pc-formule-prix { display: flex; align-items: baseline; gap: 5px; margin: 0 0 4px; } .pc-formule-prix b { font-family: var(--pc-data); font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--pc-texte); font-variant-numeric: tabular-nums; } .pc-formule-prix span { font-size: 13px; font-weight: 700; color: var(--pc-gris); } /* Prix unitaire et économie du pack : CALCULÉS par le serveur depuis Stripe (tarif.php), jamais écrits ici */ .pc-formule-unitaire { margin: 0 0 16px; font-size: 11.5px; font-weight: 650; color: var(--pc-turquoise-texte); min-height: 17px; } .pc-formule-liste { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 7px; } .pc-formule-liste li { display: grid; grid-template-columns: 15px 1fr; gap: 8px; font-size: 12px; color: var(--pc-texte); } .pc-formule-liste svg { color: var(--pc-turquoise-texte); margin-top: 2px; } .pc-formule-btn { width: 100%; min-height: var(--pc-tactile); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: var(--pc-radius); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background var(--pc-duree) ease, transform .18s ease; } .pc-formule-btn:disabled { cursor: not-allowed; opacity: .55; } .pc-formule-btn:focus-visible { outline: 2.5px solid var(--pc-turquoise); outline-offset: 2px; } /* Le jaune reste la couleur du geste payant (doctrine du bouton d'analyse) */ .pc-formule-btn-plein { background: var(--pc-jaune); color: var(--pc-marine); border: none; } .pc-formule-btn-plein:hover:not(:disabled) { background: var(--pc-jaune-hover); transform: translateY(-1px); } .pc-formule-btn-contour { background: var(--pc-papier); color: var(--pc-marine); border: 1.5px solid var(--pc-marine); } .pc-formule-btn-contour:hover:not(:disabled) { background: var(--pc-turquoise-pale); } .pc-formules-note { text-align: center; font-size: 11.5px; color: var(--pc-gris); margin: 16px 0 0; } /* ---------------- L'avertissement de doublon ---------------- */ .pc-doublon-ic { width: 54px; height: 54px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: var(--pc-ambre-pale); color: var(--pc-ambre-texte); } .pc-doublon-choix { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } /* ========================================================================= TUNNEL DU PACK DE 3 (28/07/2026) — compteur, jauge, marque-pages, suite. ========================================================================= */ /* Compteur en tête du document : « N / 3 » (textuel) + jauge (visuelle) */ .pc-pack-barre { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--pc-bordure); } .pc-pack-barre b { font-family: var(--pc-data); font-size: 13px; font-weight: 700; color: var(--pc-marine); background: var(--pc-pastille); padding: 4px 11px; border-radius: var(--pc-radius); font-variant-numeric: tabular-nums; white-space: nowrap; } .pc-pack-barre > span:not(.pc-jauge) { font-size: 12.5px; color: var(--pc-gris); } .pc-jauge { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; } .pc-jauge i { display: block; width: 26px; height: 5px; border-radius: 3px; background: var(--pc-bordure); } .pc-jauge i.est-fait { background: var(--pc-turquoise); } .pc-jauge i.est-actif { background: var(--pc-marine); } /* Marque-pages : onglets de classeur le long du document (bureau) — légèrement décalés vers l'extérieur, ils rentrent au survol et quand ils sont actifs. Horizontaux au-dessus du document sur téléphone (défaut). */ .pc-onglets { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } .pc-onglet { position: relative; display: block; min-width: 58px; min-height: var(--pc-tactile); padding: 10px 8px; background: color-mix(in srgb, var(--pc-marine) 6%, var(--pc-papier)); border: 1px solid var(--pc-bordure); border-radius: var(--pc-radius) var(--pc-radius) 0 0; text-align: center; cursor: pointer; transition: transform var(--pc-duree) ease, background var(--pc-duree) ease; } .pc-onglet b { display: block; font-family: var(--pc-data); font-size: 15px; font-weight: 700; line-height: 1; color: var(--pc-gris); } .pc-onglet i { display: block; font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pc-gris); margin-top: 3px; } .pc-onglet-pip { display: block; width: 14px; height: 14px; margin: 5px auto 0; color: var(--pc-turquoise-texte); } .pc-onglet-pip svg { width: 14px; height: 14px; } .pc-onglet.est-fait { background: var(--pc-turquoise-pale); border-color: color-mix(in srgb, var(--pc-turquoise) 40%, var(--pc-papier)); } .pc-onglet.est-fait b, .pc-onglet.est-fait i { color: var(--pc-turquoise-texte); } .pc-onglet.est-fait:hover, .pc-onglet.est-fait:focus-visible { transform: translateY(-2px); } .pc-onglet.est-fait:focus-visible { outline: 2.5px solid var(--pc-turquoise); outline-offset: 2px; } .pc-onglet.est-actif { background: var(--pc-marine); border-color: var(--pc-marine); box-shadow: 0 3px 12px color-mix(in srgb, var(--pc-marine) 22%, transparent); } .pc-onglet.est-actif b, .pc-onglet.est-actif i { color: var(--pc-papier); } .pc-onglet.est-actif .pc-onglet-pip { color: var(--pc-turquoise); } /* Un onglet « à venir » n'est PAS cliquable (disabled) : atténué, curseur par défaut, aucun relief au survol */ .pc-onglet.est-futur { opacity: .55; cursor: default; } .pc-onglet:disabled { cursor: default; } /* Bureau large : les onglets passent à la verticale le long du document, dans leur colonne de grille — le décalage vers l'extérieur devient horizontal, comme des onglets de classeur */ @media (min-width: 1100px) { .pc-duo-pack { grid-template-columns: 58px minmax(0, 720px) minmax(300px, 1fr); } .pc-duo-pack .pc-onglets { flex-direction: column; padding-top: 26px; gap: 8px; } .pc-duo-pack .pc-onglet { width: 100%; border-right: none; border-radius: var(--pc-radius) 0 0 var(--pc-radius); transform: translateX(6px); } .pc-duo-pack .pc-onglet.est-fait:hover, .pc-duo-pack .pc-onglet.est-fait:focus-visible, .pc-duo-pack .pc-onglet.est-actif { transform: translateX(0); } .pc-duo-pack .pc-onglet.est-actif { box-shadow: -3px 3px 12px color-mix(in srgb, var(--pc-marine) 22%, transparent); } } /* Bandeau du pack sur l'écran de dépôt : compteur, jauge, et le rappel qu'aucun nouveau paiement n'est demandé */ .pc-depot-pack { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 15px; background: var(--pc-turquoise-pale); border: 1px solid color-mix(in srgb, var(--pc-turquoise) 40%, var(--pc-papier)); border-radius: var(--pc-radius-lg); } .pc-depot-pack b { font-family: var(--pc-data); font-size: 13px; font-weight: 700; color: var(--pc-marine); background: var(--pc-papier); padding: 4px 11px; border-radius: var(--pc-radius); font-variant-numeric: tabular-nums; white-space: nowrap; } .pc-depot-pack > span:not(.pc-jauge) { font-size: 12.5px; font-weight: 650; color: var(--pc-turquoise-texte); } /* Note du cumul dans la carte du pack */ .pc-pack-cumul-note { margin-top: 12px; } /* ---------------- Suite du parcours ---------------- */ .pc-suite { margin-top: 18px; padding: 18px 20px; background: var(--pc-turquoise-pale); border: 1px solid color-mix(in srgb, var(--pc-turquoise) 40%, var(--pc-papier)); border-radius: var(--pc-radius-lg); } .pc-suite h3 { margin: 0 0 4px; font-family: var(--pc-titres); font-size: 15.5px; font-weight: 700; color: var(--pc-marine); } .pc-suite p { margin: 0 0 14px; font-size: 12.5px; color: var(--pc-gris); } .pc-suite-note { margin: 11px 0 0 !important; font-size: 11.5px !important; font-weight: 650; color: var(--pc-turquoise-texte) !important; } /* ================= ÉCRAN DE REFUS ================= */ .pc-refus { max-width: 520px; margin: 10px auto; text-align: center; } .pc-refus-ic { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: rgba(239, 68, 68, .10); color: var(--pc-rouge); animation: pcPouls 2.4s ease-in-out infinite; } @keyframes pcPouls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .pc-refus .pc-titre { font-size: 19px; } .pc-refus-explication { margin: 0 auto 18px; font-size: 13.5px; color: var(--pc-gris); max-width: 420px; } .pc-conseil { background: var(--pc-fond-pale); border: 1px solid var(--pc-bordure); border-radius: 9px; padding: 14px 16px; text-align: left; display: grid; grid-template-columns: 20px 1fr; gap: 11px; margin-bottom: 16px; } .pc-conseil svg { color: var(--pc-turquoise-texte); margin-top: 1px; } .pc-conseil b { display: block; font-size: 12.5px; font-weight: 650; margin-bottom: 2px; color: var(--pc-texte); } .pc-conseil p { margin: 0; font-size: 12px; color: var(--pc-gris); } .pc-sans-frais { margin: 12px 0 0; font-size: 12px; color: #047857; font-weight: 650; } /* ================= ÉCRAN DE CONNEXION ================= */ .pc-connexion { max-width: 440px; margin: 6px auto; text-align: center; } .pc-connexion .pc-sous-titre { margin-bottom: 20px; } .pc-sso { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; } .pc-sso-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--pc-tactile); padding: 11px 16px; border: 1px solid var(--pc-bordure); border-radius: var(--pc-radius); background: #fff; color: var(--pc-texte); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: border-color var(--pc-duree) ease, box-shadow var(--pc-duree) ease; } .pc-sso-btn:hover { border-color: var(--pc-action); box-shadow: 0 3px 10px rgba(30, 55, 96, .08); } .pc-cgu { display: flex; align-items: flex-start; gap: 10px; text-align: left; font-size: 12px; color: var(--pc-gris); cursor: pointer; padding: 8px; border-radius: var(--pc-radius); } .pc-cgu:focus-visible { outline: 2px solid var(--pc-turquoise); outline-offset: 2px; } .pc-cgu-case { width: 20px; height: 20px; flex-shrink: 0; } .pc-cgu-case svg { width: 20px; height: 20px; } .pc-cgu-cadre { fill: #fff; stroke: var(--pc-bordure); stroke-width: 2; transition: stroke var(--pc-duree) ease, fill var(--pc-duree) ease; } .pc-cgu-coche { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s ease; } .pc-cgu[aria-checked="true"] .pc-cgu-cadre { fill: var(--pc-turquoise-texte); stroke: var(--pc-turquoise-texte); } .pc-cgu[aria-checked="true"] .pc-cgu-coche { opacity: 1; } /* ================= PARCOURS DE DÉMONSTRATION (27/07/2026) ================ Le visiteur voit le vrai parcours jouer sur un bulletin fictif, sans compte, sans dépôt et sans AUCUN appel serveur : les données et les constats sont figés côté serveur (demo-data.php) et livrés avec la page ; les animations sont celles du parcours réel (spinner de marque, fondu croisé, barre plafonnée à 96 %, barre de scan). AUCUN MONTANT DE TARIF n'apparaît dans la démonstration : le prix appartient au parcours réel. ========================================================================= */ /* L'identification de l'exemple est portée par l'étiquette « Exemple fictif » du document reconstitué (ci-dessous) : le bandeau pleine largeur a été retiré le 27/07/2026 — il écrasait la présentation. Le retour aux consignes vit sobrement à droite du titre. */ .pc-demo-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .pc-demo-tete .pc-titre { margin-bottom: 0; } .pc-demo-retour { display: inline-flex; align-items: center; gap: 6px; flex: none; background: none; border: none; padding: 4px 0; font-family: inherit; font-size: 12px; font-weight: 650; color: var(--pc-gris); cursor: pointer; text-decoration: none; } .pc-demo-retour:hover, .pc-demo-retour:focus-visible { color: var(--pc-marine); text-decoration: underline; } /* Étiquette portée par le document fictif lui-même, dans son en-tête */ .pc-demo-entete-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .pc-demo-tag { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pc-ambre-texte); background: var(--pc-ambre-pale); padding: 4px 9px; border-radius: 999px; white-space: nowrap; } /* Les pôles, le score et la carte PDF de la démonstration emploient les classes PARTAGÉES de la restitution unifiée (.pc-poles, .pc-pole, .pc-synthese-score, .pc-pdf — section « Restitution unifiée » plus haut) : la démonstration est la référence, les deux vues portent exactement le même habillage. */ /* Sortie de la démonstration : passer à son propre bulletin */ .pc-demo-final { margin-top: 18px; padding: 20px; border-radius: var(--pc-radius-lg); background: var(--pc-turquoise-pale); border: 1px solid color-mix(in srgb, var(--pc-turquoise) 32%, var(--pc-papier)); text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; } .pc-demo-final.is-visible { opacity: 1; transform: none; } .pc-demo-final h3 { margin: 0 0 4px; font-family: var(--pc-titres); font-size: 15.5px; font-weight: 700; color: var(--pc-marine); } .pc-demo-final p { margin: 0 0 14px; font-size: 12.5px; color: var(--pc-gris); } /* ================= NOSCRIPT ET PIED ================= */ .pc-noscript { margin-top: 20px; padding: 14px 16px; border-radius: var(--pc-radius); background: var(--pc-ambre-pale); color: var(--pc-ambre-texte); font-size: 13px; font-weight: 600; } /* Mention réglementaire : le mini pied de page de l'application a disparu au profit du pied de page du site, mais cette mention protège juridiquement le service — elle reste dans le parcours, discrète et toujours visible. */ .pc-mention-legale { margin: 14px 0 0; text-align: center; font-size: 11px; line-height: 1.6; color: var(--pc-gris); } /* ========================================================================= FENÊTRE « À PROPOS » (28/07/2026) Le lien d'appel vit sous la mention réglementaire, à la même discrétion qu'elle. La fenêtre reprend la mécanique commune (.pc-modale, croix, extérieur, Échap, piège de focus — paiecheck.js) ; son ARRIÈRE-PLAN reprend le procédé de la modale SSO du site (public/css/components/modal-sso.css, modèle imité, jamais modifié) : voile noir à 65 % et flou de 5 px — valeurs du modèle, à l'identique. Les autres fenêtres du parcours gardent leur voile marine : le procédé n'est appliqué qu'ici, par la classe .pc-modale-apropos. Aucun sélecteur global : tout vit sous .pc-modale-apropos / .pc-apropos-*. ========================================================================= */ .pc-apropos-appel { margin: 6px 0 0; text-align: center; } .pc-apropos-lien { display: inline-flex; align-items: center; gap: 6px; min-height: var(--pc-tactile); padding: 4px 10px; background: none; border: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; color: var(--pc-gris); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; border-radius: var(--pc-radius); transition: color var(--pc-duree) ease; } .pc-apropos-lien:hover { color: var(--pc-marine); } .pc-apropos-lien:focus-visible { outline: 2.5px solid var(--pc-turquoise); outline-offset: 2px; color: var(--pc-marine); } /* Voile noir flouté : procédé de modal-sso.css, repris à l'identique. Même classe unique que .pc-modale : déclarée APRÈS elle, elle l'emporte. */ .pc-modale-apropos { background: rgba(0, 0, 0, 0.65); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } /* La carte se lit comme un document : plus large que la fenêtre des formules, texte à gauche, défilement intérieur (max-height + overflow hérités de .pc-modale-carte). */ .pc-modale-carte-apropos { max-width: 880px; padding: 34px 34px 28px; } .pc-apropos-tete { margin-bottom: 20px; padding-bottom: 18px; padding-right: 52px; /* la croix de fermeture ne recouvre jamais le titre */ border-bottom: 1px solid var(--pc-bordure); } .pc-apropos-marque { margin: 0 0 8px; font-family: var(--pc-titres); font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--pc-marine); } .pc-apropos-marque .pc-marque-suffixe { color: var(--pc-turquoise-texte); } .pc-apropos-marque sup { font-size: 11px; color: var(--pc-gris); margin-left: 2px; } .pc-apropos-tete h3 { margin: 0 0 4px; font-family: var(--pc-titres); font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--pc-marine); } .pc-apropos-baseline { margin: 0; font-size: 13px; color: var(--pc-gris); } .pc-apropos-h { margin: 26px 0 10px; font-family: var(--pc-titres); font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--pc-marine); } .pc-apropos-corps .pc-apropos-h:first-child { margin-top: 0; } .pc-apropos-p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--pc-texte); } .pc-apropos-p strong { color: var(--pc-marine); } /* La chaîne de traitement : quatre étapes numérotées */ .pc-apropos-chaine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 12px; } .pc-apropos-etape { position: relative; background: var(--pc-fond-pale); border: 1px solid var(--pc-bordure); border-radius: var(--pc-radius-lg); padding: 16px 14px 13px; } .pc-apropos-etape i { position: absolute; top: -9px; left: 13px; width: 20px; height: 20px; display: grid; place-items: center; font-style: normal; font-family: var(--pc-data); font-size: 10px; font-weight: 700; background: var(--pc-marine); color: var(--pc-papier); border-radius: 50%; } .pc-apropos-etape b { display: block; font-size: 12.5px; font-weight: 700; color: var(--pc-marine); margin-bottom: 4px; } .pc-apropos-etape span { display: block; font-size: 11.5px; line-height: 1.5; color: var(--pc-gris); } /* Les trois pôles de restitution : mêmes couleurs que le parcours (rouge / ambre / bleu d'action), fonds dérivés des jetons */ .pc-apropos-poles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 12px; } .pc-apropos-pole { border-left: 4px solid; border-radius: var(--pc-radius-lg); padding: 13px 14px; } .pc-apropos-pole.ko { background: color-mix(in srgb, var(--pc-rouge) 9%, var(--pc-papier)); border-color: var(--pc-rouge); } .pc-apropos-pole.wr { background: var(--pc-ambre-pale); border-color: var(--pc-ambre); } .pc-apropos-pole.nf { background: var(--pc-pastille); border-color: var(--pc-action); } .pc-apropos-pole b { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 3px; } .pc-apropos-pole.ko b { color: var(--pc-rouge); } .pc-apropos-pole.wr b { color: var(--pc-ambre-texte); } .pc-apropos-pole.nf b { color: var(--pc-action); } .pc-apropos-pole span { display: block; font-size: 11.5px; line-height: 1.5; color: var(--pc-texte); } /* Les familles de contrôles : nombres COMPTÉS depuis le moteur (apropos.php) */ .pc-apropos-familles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; } .pc-apropos-fam { background: var(--pc-papier); border: 1px solid var(--pc-bordure); border-radius: var(--pc-radius); padding: 12px 14px; } .pc-apropos-fam b { display: block; font-size: 12.5px; font-weight: 700; color: var(--pc-marine); margin-bottom: 3px; } .pc-apropos-fam b em { font-style: normal; font-family: var(--pc-data); font-size: 11px; font-weight: 700; color: var(--pc-turquoise-texte); } .pc-apropos-fam span { display: block; font-size: 11.5px; line-height: 1.5; color: var(--pc-gris); } /* Ce que PaieCheck n'est pas : mêmes termes que le rapport PDF et les CGV */ .pc-apropos-limites { background: var(--pc-fond); border-radius: var(--pc-radius-lg); padding: 16px 18px; margin: 14px 0 12px; } .pc-apropos-limites ul { margin: 0; padding-left: 18px; } .pc-apropos-limites li { font-size: 12.5px; line-height: 1.55; color: var(--pc-texte); margin-bottom: 8px; } .pc-apropos-limites li:last-child { margin-bottom: 0; } .pc-apropos-limites li strong { color: var(--pc-marine); } /* Vos documents : encart de confidentialité */ .pc-apropos-rgpd { display: grid; grid-template-columns: 26px 1fr; gap: 12px; background: var(--pc-turquoise-pale); border-radius: var(--pc-radius-lg); padding: 16px 18px; margin: 14px 0 12px; } .pc-apropos-rgpd svg { color: var(--pc-turquoise-texte); margin-top: 2px; } .pc-apropos-rgpd p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--pc-texte); } .pc-apropos-rgpd p + p { margin-top: 7px; } .pc-apropos-rgpd strong { color: var(--pc-marine); } /* Version du service : chaque valeur est DÉRIVÉE (constantes, moteur, table des taux, filemtime) — « — » vaut source muette, jamais un nombre inventé (apropos.php) */ .pc-apropos-build { border-top: 1px solid var(--pc-bordure); margin-top: 26px; padding-top: 18px; } .pc-apropos-build-t { margin: 0 0 12px; font-family: var(--pc-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--pc-gris); } .pc-apropos-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .pc-apropos-cell { background: var(--pc-fond-pale); border: 1px solid var(--pc-bordure); border-radius: var(--pc-radius); padding: 11px 12px; } .pc-apropos-cell span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-gris); margin-bottom: 4px; } .pc-apropos-cell b { display: block; font-family: var(--pc-data); font-size: 13px; font-weight: 700; color: var(--pc-marine); } .pc-apropos-cell em { display: block; font-style: normal; font-family: var(--pc-data); font-size: 10.5px; color: var(--pc-turquoise-texte); margin-top: 2px; } .pc-apropos-legal { margin: 14px 0 0; padding: 13px 15px; background: var(--pc-fond-pale); border: 1px solid var(--pc-bordure); border-radius: var(--pc-radius); font-size: 11px; line-height: 1.6; color: var(--pc-gris); } .pc-apropos-legal strong { color: var(--pc-texte); } /* Téléphone : les grilles de la fenêtre s'empilent */ @media (max-width: 760px) { .pc-modale-carte-apropos { padding: 26px 18px 22px; } .pc-apropos-chaine { grid-template-columns: 1fr 1fr; } .pc-apropos-poles { grid-template-columns: 1fr; } .pc-apropos-familles { grid-template-columns: 1fr; } .pc-apropos-grille { grid-template-columns: 1fr 1fr; } } /* ================= TÉLÉPHONE ================= */ @media (max-width: 760px) { /* Scène resserrée : rembourrage réduit, la carte garde une fine bande colorée autour d'elle ; les formes s'expriment en haut et en bas. */ .pc-scene { width: calc(100% - 12px); margin: 10px auto 24px; padding: 26px 10px 36px; border-radius: 12px; } .pc-marque-barre { padding: 12px 14px; gap: 8px; } .pc-marque { font-size: 17.5px; } .pc-marque-baseline { font-size: 11.5px; } /* Libellés d'étapes remplacés par leurs numéros */ .pc-etape-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pc-etape-ligne { margin: 0 5px; } .pc-etapes { padding: 12px 14px; } .pc-corps { padding: 20px 14px 24px; } .pc-titre { font-size: 19px; } .pc-guide { grid-template-columns: 1fr; gap: 16px; } /* .pc-duo est déjà en pile par défaut (voir la grille feuille + panneau) */ .pc-zone-depot { padding: 34px 16px; } /* Colonnes du tableau resserrées, données toujours à droite */ .pc-ligne { grid-template-columns: 18px 1fr 52px 70px; font-size: 10.5px; gap: 5px; } .pc-identite { grid-template-columns: 1fr; } .pc-taux, .pc-montant { font-size: 10px; } /* Marges intérieures de page réduites, hauteur proportionnée au petit écran (~A4 d'une feuille de 350 px de large) */ .pc-document { padding: 26px 18px 30px; min-height: 480px; } /* Formes de la scène allégées : deux disques discrets et une seule trame, cantonnés aux angles des bandes haute et basse */ .pc-forme-pale-hd, .pc-forme-anneau-bd, .pc-forme-marine-bg, .pc-pois-bg { display: none; } .pc-forme-turquoise-hg { width: 190px; height: 190px; left: -104px; top: -122px; } .pc-forme-orange-bd { width: 200px; height: 200px; right: -92px; bottom: -126px; } .pc-pois-hd { right: 16px; top: 6px; width: 64px; height: 18px; } /* Le bandeau du net à payer garde sa présence sur téléphone */ .pc-doc-contenu .pc-ligne.is-total:not(:has(~ .pc-ligne.is-total)) { font-size: 11.5px; } .pc-doc-contenu .pc-ligne.is-total:not(:has(~ .pc-ligne.is-total)) .pc-montant { font-size: 12.5px; } /* Restitution unifiée (réel et démonstration) : blocs resserrés */ .pc-pole b { font-size: 18px; } .pc-synthese-score b { font-size: 30px; } .pc-demo-final { padding: 16px 14px; } /* Fenêtre des formules : une colonne, carte resserrée */ .pc-modale { padding: 14px 10px; } .pc-modale-carte { padding: 26px 18px 20px; } .pc-formules { grid-template-columns: 1fr; } /* Marque-pages du pack : à l'horizontale au-dessus du document (comportement par défaut de .pc-onglets — rappelé ici à dessein) */ .pc-onglets { flex-direction: row; } .pc-pack-barre { flex-wrap: wrap; } .pc-suite { padding: 16px 14px; } .pc-depot-pack { flex-wrap: wrap; } } /* ================= MOUVEMENT RÉDUIT (non négociable) ================= Sous prefers-reduced-motion, AUCUNE de ces animations ne se joue : les traits gris ne s'affichent pas, les données sont présentes immédiatement, le spinner de marque est remplacé par un libellé textuel. Ce n'est pas optionnel — d'où les !important, qui neutralisent aussi les styles posés en ligne par le script (largeur des traits). */ @media (prefers-reduced-motion: reduce) { .pc-app *, .pc-app *::before, .pc-app *::after, .pc-modale, .pc-modale *, .pc-modale *::before, .pc-modale *::after { animation: none !important; transition-duration: .01ms !important; } .pc-scan { display: none; } .pc-progression-attente i { width: 100%; margin: 0; } /* Spinner de marque remplacé par son libellé textuel */ .pc-spinner { display: none !important; } .pc-attente-texte { display: block; } /* Aucun trait gris : les valeurs sont là, tout de suite */ .pc-v .pc-sk { display: none !important; } .pc-v .pc-tx { opacity: 1 !important; } .pc-doc-squelette s, .pc-doc-squelette u, .pc-v .pc-sk { background-image: none; } }