/** * JR Properties — Parcours d'estimation (/estimation/) * ============================================================================= * Feuille chargée UNIQUEMENT sur le gabarit template-jr-estimation.php * (voir jrp_estim_enqueue dans inc/estimation.php). Aucune autre page du site * ne la reçoit. * * ISOLATION. Tout est porté par .jr-estim-page (sur ) ou .jr-estim (le * conteneur du parcours). Aucun sélecteur nu : ni h2, ni p, ni button, ni input. * La feuille est déclarée après custom.css, elle gagne donc à spécificité égale, * mais elle n'a de toute façon rien à écraser — le parcours ne réutilise aucune * classe du site. * * VALEURS. Palette, polices, rayons, focus et transitions repris du relevé * (blog-tokens.md) et de l'existant. Quatre écarts assumés par rapport à la * maquette HTML d'origine, tous dans le sens du site : * 1. rayons 10px (boutons, champs) et 16px (cartes) au lieu de 3px partout ; * 2. survol du bouton principal en filter: brightness(), comme le bouton * d'envoi de /contact/, au lieu du #293831 hors palette de la maquette ; * 3. focus clavier en outline sauge, convention invariante du site ; * 4. DEUX CORRECTIONS DE CONTRASTE, relevées au contrôle visuel et non à la * lecture du code : le surtitre sauge sur calcaire (2,7:1) et le texte * calcaire sur le bouton WhatsApp terracotta (2,8:1) échouaient tous deux * au niveau AA. Voir le bloc de jetons ci-dessous. Les laisser aurait * réintroduit, sur une page neuve, le défaut que le lot 2 venait de * corriger ailleurs (SEO-022). * * THÈME SOMBRE. Le parcours, et lui seul, est en sombre : c'est un tunnel * plein écran, sans en-tête ni pied de page, où l'on veut que rien ne tire l'œil * en dehors de la question posée. Les jetons --jr-est-* ci-dessous portent * l'intégralité de ce basculement et sont scopés à ce parcours ; aucune variable * du thème n'est redéfinie, aucune autre page n'est concernée. * * Sommaire * 0. Calque de fond animé * 1. Jetons et coque * 2. Barre de progression, en-tête, pied * 3. Écrans et transitions * 4. Titres et textes * 5. Réponses (choix unique et multiple) * 6. Compteurs * 7. Champs et bulles * 8. Boutons * 9. Écran d'introduction * 10. Écran de confirmation * 11. Erreur d'envoi et repli sans JavaScript * 12. Barre d'administration et mouvement réduit */ /* ========================================================================== 0. CALQUE DE FOND ANIMÉ ========================================================================== Trois taches lumineuses qui dérivent lentement derrière le parcours, sur un dégradé sombre, plus un grain très léger. CE QUE ÇA NE COÛTE PAS. Aucune image, aucune requête réseau, aucun canvas, aucune librairie, pas une ligne de JavaScript : trois dégradés radiaux et un grain SVG en data-uri. Le calque ne peut donc pas devenir le LCP (il ne peint aucun contenu), ne retarde pas le premier rendu et n'ajoute rien à la cascade de chargement. Le plus gros élément peint reste le titre de l'écran. POURQUOI HORS DES ÉCRANS. Le calque est rendu une seule fois par jrp_estim_parcours(), à côté du parcours et non dedans. Les neuf écrans apparaissent et disparaissent par-dessus lui : le fond n'est jamais recomposé, ses animations ne repartent jamais de zéro, et passer d'une étape à l'autre ne produit aucun saut de lumière. COÛT DE PEINTURE. `will-change: transform` et rien d'autre : promettre au navigateur un changement d'opacité ou de filtre le pousserait à garder trois couches supplémentaires en mémoire pour rien. Le blur est posé une fois, il n'est jamais animé — animer un filter: blur() est l'erreur classique, il se recalcule à chaque image. ========================================================================== */ .jr-estim__bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; /* Les taches débordent volontairement du cadre : sans overflow: hidden, elles allongeraient la page et feraient apparaître des barres. */ overflow: hidden; background: linear-gradient(160deg, #101815 0%, #1A2420 45%, #27332C 100%); } .jr-estim__bg-tache { position: absolute; display: block; border-radius: 50%; filter: blur(90px); will-change: transform; } /* Tache 1 — sauge, en haut à gauche. */ .jr-estim__bg-tache--1 { top: -22vw; left: -18vw; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(139, 157, 119, 0.12) 0%, rgba(139, 157, 119, 0) 70%); animation: jr-estim-derive-1 46s ease-in-out infinite alternate; } /* Tache 2 — terracotta, en bas à droite. Le seul accent chaud, tenu très bas en opacité : il réchauffe le fond sans le teinter. */ .jr-estim__bg-tache--2 { right: -16vw; bottom: -20vw; width: 55vw; height: 55vw; background: radial-gradient(circle, rgba(192, 136, 99, 0.07) 0%, rgba(192, 136, 99, 0) 70%); animation: jr-estim-derive-2 58s ease-in-out infinite alternate; animation-delay: -12s; } /* Tache 3 — eucalyptus clair, au centre droit. */ .jr-estim__bg-tache--3 { top: 22%; right: -12vw; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(62, 83, 72, 0.14) 0%, rgba(62, 83, 72, 0) 70%); animation: jr-estim-derive-3 40s ease-in-out infinite alternate; animation-delay: -25s; } /* Trois trajets distincts, et trois durées premières entre elles (46, 58, 40) : les taches ne repassent jamais ensemble par la même configuration, donc le fond ne donne jamais l'impression de boucler. */ @keyframes jr-estim-derive-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vw, 5vh, 0) scale(1.18); } } @keyframes jr-estim-derive-2 { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-6vw, -7vh, 0) scale(0.9); } } @keyframes jr-estim-derive-3 { from { transform: translate3d(0, 0, 0) scale(0.95); } to { transform: translate3d(-5vw, 8vh, 0) scale(1.15); } } /* * Grain. feTurbulence en data-uri : rien ne part sur le réseau, la texture est * calculée par le navigateur. À 0.035 d'opacité, il ne se voit pas — il casse * seulement les cerclages de dégradé (banding) qu'un fond sombre étalé sur tout * l'écran laisse apparaître sur les dalles 8 bits. */ .jr-estim__bg-grain { position: absolute; inset: 0; display: block; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); background-repeat: repeat; } /* * Mouvement réduit : les taches s'immobilisent, le fond reste. La garde est * posée ici, au plus près du composant, en plus de la règle générale de la * section 12 — celle-ci ramène les durées à 0.01ms, ce qui suffirait, mais une * animation infinie mérite d'être coupée explicitement plutôt qu'accélérée. */ @media (prefers-reduced-motion: reduce) { .jr-estim__bg-tache { animation: none; } } /* ========================================================================== 1. JETONS ET COQUE ========================================================================== */ .jr-estim-page { /* Palette : identique au relevé, y compris les deux couleurs hors palette Kadence mais structurantes sur le site (#5F5D56, #23301F). */ --jr-calcaire: #F7F4EE; --jr-eucalyptus: #33443B; --jr-sauge: #8B9D77; --jr-vert-pale: #E7EAE0; --jr-terracotta: #C08863; --jr-encre: #2E2E2A; --jr-attenue: #5F5D56; --jr-blanc: #FFFFFF; /* * Deux verts, deux emplois — la distinction n'est pas décorative. * * --jr-sauge (#8B9D77) est l'accent : pastilles, filets, barre de * progression, bordures au survol, contour de focus. Aucune de ces surfaces * ne porte de texte, le contraste n'y est donc pas un critère. * * --jr-sauge-texte (#5F724A) est la sauge des TEXTES posés sur fond clair. * Mesure faite sur le rendu : sauge sur calcaire donne 2,7:1 et sauge sur * blanc 2,9:1, très en dessous des 4,5:1 exigés — c'est le constat SEO-022, * et #5F724A est très exactement la couleur introduite au lot 2 pour le * corriger (4,9:1 sur calcaire, 5,3:1 sur blanc). Les surtitres de ce * parcours l'utilisent donc, sinon on réintroduirait un défaut déjà réparé. * * --jr-sur-terracotta (#23301F) est le texte posé sur le terracotta. Le * calcaire de la maquette y tombait à 2,8:1 ; #23301F remonte à 4,6:1. C'est * la couleur que le site emploie déjà pour le texte sur bouton sauge, pour * la même raison. */ --jr-sauge-texte: #5F724A; --jr-sur-terracotta: #23301F; /* * JETONS DU THÈME SOMBRE. * * Déclarés ICI, sur la classe de que seul ce gabarit reçoit, et non * sur :root : le parcours bascule en sombre sans qu'aucune autre page du * site ne puisse en hériter. Tout ce qui suit dans cette feuille les emploie * — il n'y a pas de couleur sombre écrite en dur ailleurs, un seul endroit à * modifier pour retoucher l'ensemble. * * --jr-est-fond n'est PAS le fond visible : le calque animé (section 0) le * recouvre entièrement. Il sert de fond au document, donc à ce qu'on voit * pendant un rebond de défilement élastique et derrière une barre d'adresse * translucide sur mobile. Un fond clair à cet endroit produirait un éclair * blanc à chaque overscroll. * * --jr-est-sur-accent est le texte posé SUR la sauge (bulle sélectionnée). * Calcaire sur sauge donne 2,4:1 et échoue ; #1A2420 remonte à 5,4:1. C'est * la même correction que --jr-sur-terracotta, pour la même raison. */ --jr-est-fond: #101815; --jr-est-text: #F7F4EE; --jr-est-text-muted: rgba(247, 244, 238, 0.62); --jr-est-surface: rgba(247, 244, 238, 0.04); --jr-est-border: rgba(247, 244, 238, 0.14); --jr-est-input-bg: rgba(0, 0, 0, 0.25); --jr-est-accent: #8B9D77; --jr-est-sur-accent: #1A2420; --jr-est-placeholder: rgba(247, 244, 238, 0.38); --jr-est-discret: rgba(247, 244, 238, 0.55); --jr-est-bord-repos: rgba(247, 244, 238, 0.22); --jr-titre: "Prata", Georgia, "Times New Roman", serif; --jr-corps: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --jr-ease: cubic-bezier(.22, .61, .36, 1); --jr-bord: rgba(51, 68, 59, 0.14); margin: 0; background-color: var(--jr-est-fond); color: var(--jr-est-text); font-family: var(--jr-corps); font-size: 16px; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; } .jr-estim-main { display: block; outline: none; } /* z-index 1 : le parcours passe au-dessus du calque de fond, qui est à 0. Sans position, le z-index ne s'appliquerait pas. */ .jr-estim { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; padding: clamp(20px, 4vw, 40px); box-sizing: border-box; } /* ========================================================================== 2. BARRE DE PROGRESSION, EN-TÊTE, PIED ========================================================================== */ .jr-estim__progression { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(247, 244, 238, 0.12); z-index: 50; } .jr-estim__progression-barre { height: 100%; width: 0; background: var(--jr-est-accent); transition: width 0.5s var(--jr-ease); } .jr-estim__haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; } /* Le logotype est le SEUL lien sortant des neuf écrans : une porte de sortie volontaire, pas un menu. */ .jr-estim__marque { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; } /* * Emblème clair, LA MÊME BOÎTE QUE L'EN-TÊTE DE L'ACCUEIL : 95px de haut, 80px * de large au maximum. Ces deux valeurs ne sont pas choisies ici, elles sont * relevées sur le site en ligne, où le logo de l'accueil est un * background-image en `contain` dans une boîte de 80 x 95 (voir le commentaire * de jrp_estim_parcours). L'accueil ne réduit pas ce logo sur mobile. * * Le rapport du fichier (671 x 800, soit 0,839) est très légèrement inférieur à * celui de la boîte (0,842) : à 95px de haut, l'image fait 79,7px de large et * passe donc sous le max-width sans jamais être écrasée. La contrainte de * largeur ne sert qu'à garantir qu'elle ne déborde pas si le fichier était un * jour réexporté dans un autre rapport. * * AUCUN filter n'est appliqué : c'est un vrai fichier clair, pas un logo foncé * inversé. Une inversion CSS aurait retourné le terracotta du soleil en bleu. */ .jr-estim__logo { display: block; height: 95px; width: auto; max-width: 80px; opacity: 0.92; transition: opacity 0.25s var(--jr-ease); } .jr-estim__marque:hover .jr-estim__logo { opacity: 1; } /* -------------------------------------------------------------------------- LA SORTIE ÉCRITE -------------------------------------------------------------------------- Le poids visuel est celui de « Retour » et « Passer cette question » en bas d'écran : même jeton --jr-est-discret, même famille de taille. C'est volontaire — cette sortie doit être TROUVABLE, pas concurrente des réponses, qui sont la seule chose que le visiteur ait à faire ici. 5,67:1 sur le fond du module, au-dessus des 4,5:1 exigés pour du texte courant. Le soulignement discret fait le reste : c'est lui, et non la couleur, qui dit que c'est un lien. -------------------------------------------------------------------------- */ .jr-estim__haut-gauche { display: flex; align-items: center; gap: 14px; min-width: 0; } .jr-estim__sortie { min-width: 0; } /* Un seul enfant visible à la fois (variante longue OU courte) : inline-block suffit, et le lien reste sur la ligne de base du bandeau. Il y a eu une flèche ici, avec le inline-flex et le gap qu'elle demandait ; les deux sont partis avec elle. */ .jr-estim-page .jr-estim__quitter { display: inline-block; font-family: inherit; font-size: 14px; line-height: 1.2; color: var(--jr-est-discret); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(247, 244, 238, 0.28); transition: color 0.2s var(--jr-ease), text-decoration-color 0.2s var(--jr-ease); } .jr-estim-page .jr-estim__quitter:hover, .jr-estim-page .jr-estim__quitter:focus-visible { color: var(--jr-est-accent); text-decoration-color: currentColor; } /* Une déclaration `display` l'emporte sur le display:none que le navigateur attache à [hidden] : sans cette règle, le lien reste affiché SOUS la confirmation au lieu de lui céder la place. Même raison pour .jr-estim__conf plus bas — les deux états occupent le même emplacement, l'un OU l'autre. */ .jr-estim-page .jr-estim__quitter[hidden] { display: none; } /* Variante longue par défaut, variante courte sous 560px (voir le commentaire du balisage : ce sont deux textes réels, pas un mot masqué). */ .jr-estim__quitter-court { display: none; } /* --- L'avertissement, à la place du lien ---------------------------------- */ .jr-estim__conf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; line-height: 1.2; } .jr-estim__conf[hidden] { display: none; } .jr-estim__conf-txt { color: var(--jr-est-text); } /* * « Quitter » prend l'accent, « Annuler » reste discret. Ce n'est pas une * hiérarchie de préférence : c'est le sens du geste. Le visiteur qui a cliqué * a demandé à sortir, la réponse à sa demande doit être la plus lisible des * deux ; « Annuler » n'est là que pour rattraper un clic involontaire. */ .jr-estim-page .jr-estim__conf-oui { color: var(--jr-est-accent); font-family: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; } .jr-estim-page .jr-estim__conf-non { background: none; border: none; padding: 0; font-family: inherit; font-size: 14px; color: var(--jr-est-discret); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 0.2s var(--jr-ease); } .jr-estim-page .jr-estim__conf-non:hover, .jr-estim-page .jr-estim__conf-non:focus-visible { color: var(--jr-est-text); } .jr-estim__etape { margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jr-est-text-muted); opacity: 0; transition: opacity 0.35s var(--jr-ease); } .jr-estim__etape.is-on { opacity: 1; } .jr-estim__scene { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 5vh, 56px) 0; } .jr-estim__inner { width: 100%; max-width: 680px; } .jr-estim__bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; } /* * « Retour » et « Passer cette question » : discrets, jamais invisibles. * Sélecteurs préfixés par .jr-estim-page pour passer devant les règles que * Kadence pose sur `button` et `button:hover` — sans quoi le survol * réappliquerait la couleur de texte du thème parent, qui est prévue pour un * fond clair (voir la note de la section 7 sur le même sujet). */ .jr-estim-page .jr-estim__retour { background: none; border: none; font-family: inherit; font-size: 14px; color: var(--jr-est-discret); cursor: pointer; padding: 8px 2px; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--jr-ease), color 0.2s var(--jr-ease); } .jr-estim-page .jr-estim__retour.is-on { opacity: 1; pointer-events: auto; } .jr-estim-page .jr-estim__retour:hover, .jr-estim-page .jr-estim__retour:focus-visible { color: var(--jr-est-accent); } .jr-estim-page .jr-estim__passer { background: none; border: none; font-family: inherit; font-size: 13.5px; color: var(--jr-est-discret); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 2px; } .jr-estim-page .jr-estim__passer:hover, .jr-estim-page .jr-estim__passer:focus-visible { color: var(--jr-est-accent); } /* * Convention de focus du site, invariante : contour sauge, décollé de 3px. * * Sélecteur à trois éléments, et non deux, volontairement. Kadence pose sur le * une classe `hide-focus-outline` (retirée à la première touche du * clavier par son propre script) et annule le contour depuis un sélecteur de * même poids. À spécificité égale, c'est l'ordre des feuilles qui trancherait — * exactement le piège qui avait rendu l'image de repli du blog invisible. * On sort de l'égalité plutôt que de compter sur l'ordre. */ .jr-estim-page .jr-estim :focus-visible { outline: 2px solid var(--jr-est-accent); outline-offset: 3px; } /* * L'ENCADRÉ AUTOUR DU TITRE : d'où il venait, et pourquoi il disparaît ici. * * À chaque changement d'écran, le script donne le focus au titre (tabindex=-1) * pour que le lecteur d'écran annonce la nouvelle question — il n'y a pas de * rechargement de page pour le faire. Or plusieurs navigateurs considèrent un * focus programmatique comme « visible » et lui appliquent :focus-visible : * la règle juste au-dessus dessinait donc un rectangle sauge autour du H1 dès * l'ouverture du parcours, sans que personne n'ait touché au clavier. * * Le titre n'est pas un élément actionnable : il ne reçoit le focus que pour * être annoncé, jamais pour être utilisé au clavier. Lui retirer l'indicateur * ne fait donc perdre aucun repère — le parcours reste entièrement navigable au * clavier, et tous les éléments réellement actionnables gardent le leur. * * Trois propriétés annulées et non une : outline pour la règle ci-dessus, * box-shadow et border au cas où le thème parent en poserait sur un titre * focalisé. Aucun pseudo-élément n'est déclaré sur .jr-estim__titre : il n'y a * donc rien d'autre à retirer, le titre est nu. */ .jr-estim-page .jr-estim .jr-estim__titre:focus, .jr-estim-page .jr-estim .jr-estim__titre:focus-visible { outline: none; box-shadow: none; border: 0; } /* ========================================================================== 3. ÉCRANS ET TRANSITIONS ========================================================================== */ /* Aucune règle display sur .jr-estim__ecran : la visibilité est portée par l'attribut [hidden], que le script pose et retire. Écrire display:block ici neutraliserait [hidden] et afficherait les neuf écrans en même temps. */ .jr-estim__ecran.is-active { animation: jr-estim-entre 0.42s var(--jr-ease) both; } .jr-estim__ecran.is-active.is-retour { animation-name: jr-estim-entre-retour; } @keyframes jr-estim-entre { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } } @keyframes jr-estim-entre-retour { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } } /* ========================================================================== 4. TITRES ET TEXTES ========================================================================== */ /* * Surtitre en sauge PLEINE (#8B9D77), et non dans la sauge assombrie du reste * du site : la correction de contraste SEO-022 visait la sauge posée sur fond * CLAIR (2,7:1). Sur le fond sombre du parcours, le rapport s'inverse — la * sauge pleine y donne 6,1:1, tandis que #5F724A tomberait à 2,4:1. Employer * ici le jeton prévu pour le fond clair réintroduirait très exactement le * défaut qu'il corrige ailleurs. */ .jr-estim__eyebrow { margin: 0 0 14px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jr-est-accent); } /* Prata n'existe qu'en 400 : aucune graisse supérieure ne doit être demandée, le navigateur synthétiserait un faux gras (blog-tokens.md §4). */ .jr-estim__titre { margin: 0; font-family: var(--jr-titre); font-weight: 400; color: var(--jr-est-text); line-height: 1.2; letter-spacing: -0.01em; font-size: clamp(23px, 3.8vw, 32px); outline: none; } .jr-estim__titre--h1 { font-size: clamp(30px, 5.4vw, 46px); } .jr-estim__chapo { margin: 12px 0 0; color: var(--jr-est-text-muted); max-width: 46ch; font-size: clamp(15px, 1.7vw, 17px); } /* * LE CHAPÔ DE LA DERNIÈRE ÉTAPE EST OBLIGATOIRE. * * « Nous vous rappelons sous 48 heures ouvrées avec votre estimation » est la * seule contrepartie annoncée en échange d'un numéro de téléphone. Il est rendu * avant les champs, donc AU-DESSUS du bouton d'envoi sur tous les formats, et * rien ici ne doit le replier, le tronquer ni le renvoyer en bas de page — pas * même sous 375px, où l'on est toujours tenté de gagner deux lignes. * * Cette règle ne fait qu'écrire noir sur blanc l'état attendu, pour qu'une * future règle de compactage mobile bute dessus au lieu de le masquer en * silence. */ .jr-estim__ecran[data-cle="coordonnees"] .jr-estim__chapo { display: block; max-height: none; overflow: visible; } .jr-estim__bloc { margin-top: clamp(26px, 4vh, 38px); } /* ========================================================================== 5. RÉPONSES ========================================================================== */ .jr-estim__opts { display: grid; gap: 10px; } .jr-estim__opts--duo { grid-template-columns: repeat(2, 1fr); } .jr-estim__opts--pastilles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } /* * LES TROIS ÉTATS D'UNE RÉPONSE — le défaut corrigé ici. * * La version claire remplissait la carte sélectionnée d'un vert soutenu en * laissant le texte en encre foncée : sur fond sombre, la même mécanique donnait * du texte foncé sur un remplissage foncé, donc une réponse illisible au moment * précis où l'on veut vérifier ce qu'on vient de choisir. Chaque état déclare * désormais SES TROIS couleurs — fond, bordure, texte — au lieu d'en hériter * deux et d'en changer une. * * Le préfixe .jr-estim-page est là pour une raison précise : Kadence pose des * règles sur `button` et `button:hover`, y compris une couleur de texte. À * spécificité égale, c'est l'ordre des feuilles qui trancherait — le même piège * que celui documenté sur :focus-visible plus haut. Trois éléments de sélecteur * mettent la question hors de portée, quel que soit l'ordre de chargement. */ .jr-estim-page .jr-estim__opt { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 17px 20px; background-color: var(--jr-est-surface); border: 1px solid var(--jr-est-border); border-radius: 10px; font-family: inherit; font-size: 16px; color: var(--jr-est-text); cursor: pointer; transition: background-color 0.16s var(--jr-ease), border-color 0.16s var(--jr-ease), color 0.16s var(--jr-ease), transform 0.25s var(--jr-ease); } .jr-estim-page .jr-estim__opt:hover { background-color: rgba(139, 157, 119, 0.14); border-color: var(--jr-est-accent); color: var(--jr-est-text); transform: translateY(-2px); } .jr-estim-page .jr-estim__opt.is-on { background-color: var(--jr-est-accent); border-color: var(--jr-est-accent); color: var(--jr-est-sur-accent); } /* Le survol d'une réponse DÉJÀ sélectionnée ne doit pas la faire pâlir : sans cette règle, .jr-estim__opt:hover repasserait devant à spécificité égale et ramènerait le texte clair sur le remplissage sauge. */ .jr-estim-page .jr-estim__opt.is-on:hover { background-color: var(--jr-est-accent); border-color: var(--jr-est-accent); color: var(--jr-est-sur-accent); } .jr-estim__opt-texte { display: block; } .jr-estim__opt-titre { display: block; font-weight: 500; } /* La description suit la couleur du texte de la carte : sur une carte sélectionnée elle devient sombre comme le titre, à opacité réduite. Une couleur figée y serait illisible. */ .jr-estim__opt-desc { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; color: inherit; opacity: 0.72; } /* * L'affordance. RONDE pour un choix unique — c'est un bouton radio, un seul * peut être retenu. CARRÉE à coins 4px pour un choix multiple : la forme dit * qu'on peut en cocher plusieurs, et le rond disait le contraire de ce que la * question autorisait sur l'écran des équipements. */ .jr-estim__coche { width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid var(--jr-est-bord-repos); border-radius: 50%; display: grid; place-items: center; transition: border-color 0.16s var(--jr-ease), background-color 0.16s var(--jr-ease); } .jr-estim__opts[data-multiple] .jr-estim__coche { border-radius: 4px; } .jr-estim__opt.is-on .jr-estim__coche { background-color: var(--jr-est-sur-accent); border-color: var(--jr-est-sur-accent); } .jr-estim__coche svg { width: 11px; height: 11px; stroke: var(--jr-est-accent); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.2s var(--jr-ease); } .jr-estim__opt.is-on .jr-estim__coche svg { opacity: 1; } /* ========================================================================== 6. COMPTEURS ========================================================================== */ .jr-estim__compteur { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; background-color: var(--jr-est-surface); border: 1px solid var(--jr-est-border); border-radius: 10px; color: var(--jr-est-text); } .jr-estim__compteur + .jr-estim__compteur { margin-top: 10px; } .jr-estim__compteur-label { font-weight: 500; } .jr-estim__compteur-label small { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; color: var(--jr-est-text-muted); } .jr-estim__compteur-cmd { display: flex; align-items: center; gap: 6px; } /* 38px : au-dessus des 24px de la recommandation, et au-dessus des marqueurs de carte qui avaient été relevés en zone tactile trop petite (SEO-023). */ .jr-estim-page .jr-estim__compteur-btn { width: 38px; height: 38px; border: 1px solid var(--jr-est-bord-repos); background-color: transparent; border-radius: 50%; font-family: inherit; font-size: 19px; line-height: 1; color: var(--jr-est-text); cursor: pointer; transition: border-color 0.16s var(--jr-ease), background-color 0.16s var(--jr-ease), color 0.16s var(--jr-ease); } .jr-estim-page .jr-estim__compteur-btn:hover:not(:disabled) { background-color: var(--jr-est-accent); border-color: var(--jr-est-accent); color: var(--jr-est-sur-accent); } .jr-estim-page .jr-estim__compteur-btn:disabled { opacity: 0.3; cursor: not-allowed; } .jr-estim__compteur-valeur { min-width: 42px; text-align: center; font-family: var(--jr-titre); font-size: 22px; color: var(--jr-est-text); } /* ========================================================================== 7. CHAMPS ========================================================================== */ .jr-estim__champ { margin-bottom: 14px; } .jr-estim__champ label { display: block; margin-bottom: 7px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jr-est-text-muted); } .jr-estim-page .jr-estim__champ input, .jr-estim-page .jr-estim__champ textarea { width: 100%; box-sizing: border-box; padding: 15px 17px; background-color: var(--jr-est-input-bg); border: 1px solid var(--jr-est-border); border-radius: 10px; font-family: inherit; font-size: 16px; color: var(--jr-est-text); transition: border-color 0.2s var(--jr-ease), box-shadow 0.2s var(--jr-ease); } .jr-estim-page .jr-estim__champ input::placeholder, .jr-estim-page .jr-estim__champ textarea::placeholder { color: var(--jr-est-placeholder); /* Firefox applique une opacité par défaut aux placeholders : sans cette ligne, la couleur déclarée serait encore atténuée et deviendrait un fantôme sur fond sombre. */ opacity: 1; } /* * Focus : bordure sauge et halo, JAMAIS le contour bleu natif du navigateur — * il jure avec la palette et, sur fond sombre, il est le seul élément de la * page à ne pas en faire partie. Le contour :focus-visible sauge reste posé * par-dessus au clavier ; c'est lui qui satisfait le critère d'accessibilité, * et c'est pour cela qu'on peut retirer celui du navigateur sans rien perdre. */ .jr-estim-page .jr-estim__champ input:focus, .jr-estim-page .jr-estim__champ textarea:focus { outline: none; border-color: var(--jr-est-accent); box-shadow: 0 0 0 3px rgba(139, 157, 119, 0.22); } /* * Saisie automatique de Chrome : elle impose un fond bleu très clair et un * texte foncé, en !important, par -webkit-autofill. Sur un champ sombre, le * résultat est une bande claire au milieu du formulaire. La parade admise est * une ombre interne massive, qui repeint le fond sans être écrasée, et un * text-fill-color pour le texte. */ .jr-estim-page .jr-estim__champ input:-webkit-autofill, .jr-estim-page .jr-estim__champ input:-webkit-autofill:hover, .jr-estim-page .jr-estim__champ input:-webkit-autofill:focus { -webkit-text-fill-color: var(--jr-est-text); -webkit-box-shadow: 0 0 0 1000px #1A2420 inset; caret-color: var(--jr-est-text); } .jr-estim__champ textarea { min-height: 90px; resize: vertical; } .jr-estim__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* * LES BULLES DE COMMUNES. * * Quinze bulles plus la bulle de sortie : le débordement est la règle, pas * l'exception. flex-wrap et un gap resserré à 6px sur les deux axes ; sous * 560px, une hauteur maximale et un défilement vertical propre plutôt qu'un mur * de bulles qui repousserait le bouton Continuer hors de l'écran. */ .jr-estim__suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; } /* * LES TROIS ÉTATS D'UNE BULLE. Même correction que sur les cartes de réponse, * même raison : chaque état déclare son fond, sa bordure ET sa couleur de * texte. Le préfixe .jr-estim-page met le sélecteur à trois éléments, hors de * portée du `button:hover` de Kadence, qui réappliquerait sinon une couleur de * texte prévue pour un fond clair — c'est exactement ce qui rendait la bulle * survolée illisible. * * Transition sur les trois propriétés qui changent, nommées une à une : un * `transition: all` embarquerait le transform et le box-shadow du focus, qui * doivent être instantanés. */ .jr-estim-page .jr-estim__suggestion { padding: 7px 13px; font-family: inherit; font-size: 13.5px; background-color: transparent; color: var(--jr-est-text); border: 1px solid var(--jr-est-bord-repos); border-radius: 100px; cursor: pointer; transition: background-color 0.16s var(--jr-ease), border-color 0.16s var(--jr-ease), color 0.16s var(--jr-ease); } .jr-estim-page .jr-estim__suggestion:hover { background-color: rgba(139, 157, 119, 0.14); border-color: var(--jr-est-accent); color: var(--jr-est-text); } /* État sélectionné. Aucune bulle ne le porte aujourd'hui — le script remplit le champ et ne marque pas la bulle — mais l'état est déclaré pour que la sélection reste lisible le jour où elle sera marquée, plutôt que de laisser le prochain lot réinventer une couleur au jugé. */ .jr-estim-page .jr-estim__suggestion.is-on, .jr-estim-page .jr-estim__suggestion[aria-pressed="true"] { background-color: var(--jr-est-accent); border-color: var(--jr-est-accent); color: var(--jr-est-sur-accent); } /* Anneau de focus clavier : 2px de sauge, décollé de 2px. Déclaré ici en plus de la règle générale de la section 2, qui pose 3px d'offset — sur une bulle en pilule, 2px collent mieux à la forme. */ .jr-estim-page .jr-estim__suggestion:focus-visible { outline: 2px solid var(--jr-est-accent); outline-offset: 2px; } /* * « Et bien plus… » : la bulle de sortie. * * Traitement distinct et assumé — pointillés, texte atténué : elle ne se * présente pas comme une commune, parce qu'elle n'en est pas une. Au clic elle * vide le champ et y place le focus ; elle ne remplit jamais le champ avec son * propre libellé et ne peut donc pas devenir une réponse valide (voir * data-vide, dans jr-estimation.js). */ .jr-estim-page .jr-estim__suggestion--plus { border-style: dashed; border-color: rgba(247, 244, 238, 0.28); color: var(--jr-est-text-muted); font-style: italic; } .jr-estim-page .jr-estim__suggestion--plus:hover { background-color: transparent; border-color: var(--jr-est-accent); color: var(--jr-est-text); } /* * Champ de précision de l'équipement « Autre ». Sa visibilité est portée par * l'attribut [hidden], que le script pose et retire : aucune règle display * n'est écrite ici, elle neutraliserait [hidden] et le champ serait visible en * permanence — la même mécanique que pour les écrans (section 3). */ .jr-estim__precision { margin-top: 14px; animation: jr-estim-precision 0.28s var(--jr-ease) both; } @keyframes jr-estim-precision { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .jr-estim__precision .jr-estim__champ { margin-bottom: 0; } .jr-estim__consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 13.5px; line-height: 1.5; color: var(--jr-est-text-muted); cursor: pointer; } /* accent-color et color-scheme : sans le second, la case reste dessinée par le navigateur en thème clair, donc blanche sur fond sombre. */ .jr-estim__consent input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--jr-est-accent); color-scheme: dark; } /* * Le lien reste d'un seul tenant. Sans cela, « Politique de confidentialité » * se coupait sur ses espaces internes et laissait « Politique » seul en fin de * ligne : un lien scindé en deux ne se lit plus comme un lien, et la moitié * orpheline ressemble à un mot de la phrase. * * nowrap sur le LIEN seulement, jamais sur la ligne de consentement entière : * la phrase qui le précède doit continuer à se répartir normalement. Le lien * devient un bloc insécable qui bascule entier à la ligne suivante s'il ne * tient pas sur la ligne courante. * * Il ne peut pas déborder pour autant : mesuré à 375px, le lien fait 168px * dans une colonne de 307px, soit un peu plus de la moitié. Il faudrait un * écran de moins de 240px pour qu'il dépasse. */ .jr-estim__consent a { color: var(--jr-est-text); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .jr-estim__consent a:hover { color: var(--jr-est-accent); } /* * Leurre anti-robot. Sorti du flux plutôt que display:none : certains robots * ignorent les champs cachés par display, aucun ne calcule une position hors * cadre. Invisible, non focusable (tabindex="-1" côté HTML), sans hauteur. */ .jr-estim__leurre { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== 8. BOUTONS ========================================================================== */ /* * Bouton principal : calcaire plein, texte encre. Sur un fond sombre, c'est * l'élément le plus clair de l'écran — l'action principale se voit sans avoir * à être cherchée, et le contraste (15:1) ne se discute pas. */ .jr-estim-page .jr-estim__btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; background-color: var(--jr-calcaire); color: var(--jr-encre); border: 1px solid var(--jr-calcaire); border-radius: 10px; font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background-color 0.28s var(--jr-ease), color 0.28s var(--jr-ease), transform 0.28s var(--jr-ease), box-shadow 0.28s var(--jr-ease); } .jr-estim-page .jr-estim__btn:hover, .jr-estim-page .jr-estim__btn:focus-visible { background-color: #FFFFFF; color: var(--jr-encre); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30); } /* * Désactivé : un aplat franc plutôt qu'une opacité. Un bouton translucide * laisse voir le fond animé au travers et se met à respirer — sur un fond qui * bouge, l'opacité ne dit plus « indisponible », elle dit « effet ». */ .jr-estim-page .jr-estim__btn[disabled] { background-color: rgba(247, 244, 238, 0.12); border-color: transparent; color: rgba(247, 244, 238, 0.40); opacity: 1; cursor: not-allowed; transform: none; box-shadow: none; } .jr-estim-page .jr-estim__btn.is-envoi { cursor: progress; transform: none; box-shadow: none; } .jr-estim-page .jr-estim__btn--fantome { background-color: transparent; color: var(--jr-est-text); border-color: var(--jr-est-bord-repos); } .jr-estim-page .jr-estim__btn--fantome:hover, .jr-estim-page .jr-estim__btn--fantome:focus-visible { background-color: rgba(139, 157, 119, 0.14); border-color: var(--jr-est-accent); color: var(--jr-est-text); transform: none; box-shadow: none; } /* Terracotta : le seul accent chaud de la charte, réservé sur le site à l'état actif de la bottom-nav. Il sert ici à distinguer WhatsApp — un canal, pas une étape du parcours. */ .jr-estim-page .jr-estim__btn--wa { background-color: var(--jr-terracotta); border-color: var(--jr-terracotta); color: var(--jr-sur-terracotta); } .jr-estim-page .jr-estim__btn--wa:hover, .jr-estim-page .jr-estim__btn--wa:focus-visible { background-color: #CE9772; color: var(--jr-sur-terracotta); } /* ========================================================================== 9. ÉCRAN D'INTRODUCTION ========================================================================== */ .jr-estim__ecran--intro { text-align: center; } .jr-estim__ecran--intro .jr-estim__chapo { margin-left: auto; margin-right: auto; } .jr-estim__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 30px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--jr-est-text-muted); } .jr-estim__meta li { display: flex; align-items: center; gap: 8px; } .jr-estim__puce { width: 4px; height: 4px; border-radius: 50%; background: var(--jr-est-accent); display: block; } .jr-estim__filet { width: 52px; height: 1px; background: var(--jr-est-accent); margin: 26px auto 0; } /* ========================================================================== 10. ÉCRAN DE CONFIRMATION ========================================================================== */ .jr-estim__ecran--fin { text-align: center; } .jr-estim__sceau { width: 62px; height: 62px; margin: 0 auto 26px; border: 1px solid var(--jr-est-accent); border-radius: 50%; display: grid; place-items: center; animation: jr-estim-sceau 0.6s var(--jr-ease) both; } @keyframes jr-estim-sceau { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } } .jr-estim__sceau svg { width: 24px; height: 24px; stroke: var(--jr-est-accent); stroke-width: 1.6; fill: none; stroke-dasharray: 32; stroke-dashoffset: 32; animation: jr-estim-trace 0.7s var(--jr-ease) 0.25s forwards; } @keyframes jr-estim-trace { to { stroke-dashoffset: 0; } } .jr-estim__note { margin: 26px auto 0; max-width: 44ch; font-size: 14.5px; color: var(--jr-est-text-muted); } .jr-estim__note--accuse { margin-top: 12px; font-size: 13.5px; } /* Carte de dossier : rayon 16px, comme toutes les cartes du site. Surface translucide et bordure fine, comme les autres cartes du parcours. */ .jr-estim__dossier { text-align: left; margin-top: 34px; background-color: var(--jr-est-surface); border: 1px solid var(--jr-est-border); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); padding: clamp(20px, 3.5vw, 28px); } .jr-estim__dossier-titre { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--jr-est-border); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--jr-est-accent); } .jr-estim__dossier-ligne { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid rgba(247, 244, 238, 0.08); opacity: 0; transform: translateY(6px); animation: jr-estim-ligne 0.45s var(--jr-ease) both; } .jr-estim__dossier-ligne:last-child { border-bottom: none; } @keyframes jr-estim-ligne { to { opacity: 1; transform: none; } } .jr-estim__dossier-cle { flex: 0 0 auto; font-size: 13.5px; color: var(--jr-est-text-muted); } .jr-estim__dossier-valeur { text-align: right; font-size: 14.5px; font-weight: 500; color: var(--jr-est-text); } .jr-estim__fin-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; } /* ========================================================================== 11. ERREUR D'ENVOI ET REPLI SANS JAVASCRIPT ========================================================================== */ /* * Le bloc d'erreur n'est pas décoratif : c'est lui qui empêche qu'une demande * se perde en silence. Il s'affiche à la place de la confirmation quand l'envoi * échoue, et il porte toujours les voies de contact directes. */ .jr-estim__erreur { margin-top: 18px; padding: 16px 18px; background-color: rgba(192, 136, 99, 0.12); border: 1px solid var(--jr-terracotta); border-left-width: 3px; border-radius: 10px; font-size: 14.5px; line-height: 1.6; color: var(--jr-est-text); } .jr-estim__erreur p { margin: 0; } .jr-estim__erreur p + p { margin-top: 8px; } .jr-estim__erreur a { color: var(--jr-est-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .jr-estim__noscript { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 24px clamp(20px, 4vw, 40px); font-size: 15px; line-height: 1.6; text-align: center; color: var(--jr-est-text); } .jr-estim__noscript a { color: var(--jr-est-accent); } /* ========================================================================== 12. BARRE D'ADMINISTRATION ET MOUVEMENT RÉDUIT ========================================================================== */ /* * La page est prévisualisée depuis l'administration tant qu'elle est en * brouillon : la barre d'admin, fixée en haut, décale tout de 32px (46px sous * 782px). Sans ces deux règles, la prévisualisation montrerait un parcours * légèrement trop haut et une barre de progression cachée derrière la barre * d'admin — soit une prévisualisation qui ne dit pas la vérité. */ .jr-estim-page.admin-bar .jr-estim { min-height: calc(100dvh - 32px); } .jr-estim-page.admin-bar .jr-estim__progression { top: 32px; } @media screen and (max-width: 782px) { .jr-estim-page.admin-bar .jr-estim { min-height: calc(100dvh - 46px); } .jr-estim-page.admin-bar .jr-estim__progression { top: 46px; } } @media (max-width: 560px) { .jr-estim__opts--duo, .jr-estim__duo { grid-template-columns: 1fr; } .jr-estim__fin-cta .jr-estim__btn { width: 100%; justify-content: center; } /* * Seize bulles sur un écran de 375px feraient huit lignes, et le bouton * Continuer sortirait de l'écran : la question deviendrait un mur. On borne * la hauteur à cinq lignes environ et on fait défiler à l'intérieur. * * overscroll-behavior: contain — sans lui, arriver au bas de la liste * transmettrait le geste à la page et ferait sauter tout l'écran. * Le dégradé en mask signale qu'il reste des bulles sous le pli ; il ne cache * rien qui ne soit atteignable par le défilement, et là où mask-image n'est * pas gérée, la liste reste simplement coupée net et défilable. */ .jr-estim__suggestions { max-height: 168px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(247, 244, 238, 0.25) transparent; padding-bottom: 4px; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%); } .jr-estim__suggestions::-webkit-scrollbar { width: 4px; } .jr-estim__suggestions::-webkit-scrollbar-thumb { background-color: rgba(247, 244, 238, 0.25); border-radius: 4px; } /* * Logo réduit d'un quart sous 560px. L'accueil, lui, garde ses 95px sur * mobile, mais son en-tête ne porte rien d'autre : ici, la même ligne porte * le compteur « ÉTAPE X SUR 9 », et surtout un parcours en neuf écrans ne * peut pas céder 95px de hauteur utile en haut d'un téléphone. À 72px, le * logo reste le double de ce qu'il était et laisse la question respirer. */ .jr-estim__logo { height: 72px; max-width: 61px; } /* La ligne du haut porte l'emblème réduit et le compteur : « Retour au site » n'y tient plus sans écraser l'un des deux. On bascule sur le libellé court, le compteur n'est pas touché. */ .jr-estim__quitter-long { display: none; } .jr-estim__quitter-court { display: inline; } .jr-estim__haut-gauche { gap: 10px; } /* Les taches du fond sont dimensionnées en vw : sur un écran étroit elles deviennent minuscules et le fond s'aplatit. On les élargit pour garder la même densité lumineuse qu'en grand format. */ .jr-estim__bg-tache--1 { width: 120vw; height: 120vw; } .jr-estim__bg-tache--2 { width: 100vw; height: 100vw; } .jr-estim__bg-tache--3 { width: 110vw; height: 110vw; } } /* Chaque composant animé du site pose sa propre garde : c'est la convention, suivie ici pour les six animations de ce fichier. */ @media (prefers-reduced-motion: reduce) { .jr-estim-page *, .jr-estim-page *::before, .jr-estim-page *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }