/* ===================================================================== RP-QUIZ — Questionnaire de captation (moteur rp-quiz.js). Bloc modulaire, préfixe `.rp-quiz-*`. S'appuie sur les JETONS du design system (reseau-peinture.css) → BRAND-ADAPTATIF : la sélection utilise var(--green) (primaire), surchargé par chaque brand.css (ardoise apex, vert peinture, bleu plomberie). AUCUNE couleur en dur. ===================================================================== */ /* `font-family`/`color` sont posés par le design system sur `.rp` — or le mode plein écran PORTALISE le point de montage vers : le quiz sortait de `.rp` et retombait sur la police par défaut du navigateur (rendu serif). On les redonne au composant (mêmes jetons). */ .rp-quiz { display: block; overflow-wrap: break-word; font-family: var(--body); color: var(--ink); } /* Anti-débordement mobile (tous sites) : padding compté dans la largeur + coupure des mots longs héritée par tout le quiz (labels de tuiles, options, champs). */ .rp-quiz, .rp-quiz * { box-sizing: border-box; } /* Anti-flash au chargement : pendant le fetch du schéma, on masque le repli statique et on affiche un squelette neutre à la place (plus de flash « ancienne version » du questionnaire). Retiré par boot(). */ [data-rp-quiz].rp-quiz--booting > * { display: none; } [data-rp-quiz].rp-quiz--booting { position: relative; min-height: 320px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); overflow: hidden; } [data-rp-quiz].rp-quiz--booting::after { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.6) 50%, transparent 75%), var(--mint); background-size: 220% 100%; animation: rp-quiz-shim 1.15s linear infinite; } @keyframes rp-quiz-shim { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } @media (prefers-reduced-motion: reduce) { [data-rp-quiz].rp-quiz--booting::after { animation: none; } } .rp-quiz-card { max-width: 620px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(20px, 4vw, 34px); animation: rp-quiz-in .24s ease both; } @keyframes rp-quiz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Barre de progression */ .rp-quiz-bar { height: 6px; border-radius: 999px; background: var(--mint); overflow: hidden; margin-bottom: 20px; } .rp-quiz-bar-fill { height: 100%; background: var(--green); border-radius: 999px; transition: width .3s ease; } /* Réassurance (1er écran) */ .rp-quiz-reassure { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .rp-quiz-chip { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--muted); background: var(--mint); border-radius: 999px; padding: 5px 11px; } /* Question / aide / erreur */ .rp-quiz-q { font-family: var(--display); font-size: clamp(22px, 3.4vw, 30px); line-height: 1.12; margin: 0 0 6px; color: var(--ink); } .rp-quiz-help { color: var(--muted); font-size: 14.5px; margin: 0 0 18px; } .rp-quiz-error { color: #b3261e; font-size: 14px; font-weight: 600; margin-top: 12px; } .rp-quiz-control { margin-top: 16px; } /* Tuiles (tiles) — cible de clic large : icône + label + sous-titre. minmax(0,1fr) (au lieu de 1fr = minmax(auto,1fr)) : les pistes peuvent passer sous la largeur min du contenu → une grille 3 colonnes mobile (ex. étape « type de bien ») ne déborde plus au 1er clic sur petit écran. */ .rp-quiz-tiles { display: grid; gap: 12px; grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr)); } @media (min-width: 680px) { .rp-quiz-tiles { grid-template-columns: repeat(var(--cols-d, 3), minmax(0, 1fr)); } } .rp-quiz-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 20px 14px; cursor: pointer; font-family: var(--body); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .rp-quiz-tile:hover { border-color: var(--green-soft); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .rp-quiz-tile.is-selected { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); } .rp-quiz-ic { width: 40px; height: 40px; color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .rp-quiz-ic svg { width: 30px; height: 30px; } .rp-quiz-ini { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--green); } .rp-quiz-tile .rp-quiz-label { font-weight: 700; font-size: clamp(11.5px, 3.2vw, 15.5px); line-height: 1.2; } .rp-quiz-sub { font-size: 12.5px; color: var(--muted); line-height: 1.25; } /* Options (radio / checkbox) — bandes cliquables */ .rp-quiz-opts { display: flex; flex-direction: column; gap: 10px; } .rp-quiz-opt { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 15px 16px; cursor: pointer; font-family: var(--body); font-size: 16px; color: var(--ink); transition: border-color .15s ease, background .15s ease; } .rp-quiz-opt:hover { border-color: var(--green-soft); } .rp-quiz-opt.is-selected { border-color: var(--green); background: color-mix(in srgb, var(--green) 6%, var(--card)); } .rp-quiz-check { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 6px; transition: background .15s, border-color .15s; } .rp-quiz-opt.is-selected .rp-quiz-check { background: var(--green); border-color: var(--green); } .rp-quiz-opt .rp-quiz-label { font-weight: 600; min-width: 0; } /* Badge sobre (guidage) — teinte de marque, jamais racoleur */ .rp-quiz-badge { position: absolute; top: 8px; right: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; background: var(--mint); color: var(--green-ink); border-radius: 999px; padding: 3px 8px; } /* Champs (number / text / group) */ .rp-quiz-inline { display: flex; align-items: center; gap: 10px; } .rp-quiz-input { width: 100%; min-width: 0; font-family: var(--body); font-size: 16px; color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; } .rp-quiz-input:focus { outline: none; border-color: var(--green); } .rp-quiz-unit { color: var(--muted); font-weight: 600; } .rp-quiz-form { display: flex; flex-direction: column; gap: 14px; } .rp-quiz-frow { display: flex; flex-direction: column; gap: 6px; } .rp-quiz-flabel { font-size: 13.5px; font-weight: 600; color: var(--ink); } .rp-quiz-fhelp { font-size: 12.5px; color: var(--muted); } /* Bloc informatif (« notice ») — mentions données, AUCUNE interaction demandée. Porte les 5 mentions de `R. 223-1 I` juste au-dessus de la case de consentement (docs/75 §2). Se lit comme un encadré discret : c'est une information, pas une alerte — on ne dramatise pas un formulaire de devis. 0 couleur en dur (jetons). */ .rp-quiz-notice { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--green) 4%, var(--card)); padding: 14px 16px; } .rp-quiz-notice-title { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; } .rp-quiz-notice-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--muted); } .rp-quiz-notice-list li::marker { color: var(--green); } .rp-quiz-notice-foot { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); } .rp-quiz-notice-link { color: var(--green-ink); font-weight: 600; text-decoration: underline; } .rp-quiz-notice-link:hover { color: var(--green); } /* Consentement (2 cases §5bis) */ .rp-quiz-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.4; cursor: pointer; } .rp-quiz-consent input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--green); } /* Honeypot : hors écran + hors lecteurs (anti-bot) */ .rp-quiz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* Étape photo (facultative) */ .rp-quiz-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .rp-quiz-photo-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--body); font-weight: 600; font-size: 15px; color: var(--green); background: color-mix(in srgb, var(--green) 6%, var(--card)); border: 2px dashed var(--green-soft); border-radius: var(--radius-sm); padding: 16px 18px; width: 100%; justify-content: center; } .rp-quiz-photo-btn:hover { border-color: var(--green); } /* Variantes de bouton DANS le quiz — les variantes du design system sont scopées `.rp .rp-btn--primary`, or le mode plein écran PORTALISE le point de montage vers (il quitte donc `.rp`) : les boutons perdaient leur teinte de marque et retombaient en gris. On les rétablit ici, dans la feuille du composant, avec les MÊMES jetons (0 couleur en dur, donc toujours brand-adaptatif : vert peinture, bleu plomberie, ardoise apex). */ .rp-quiz .rp-btn--primary { background: var(--green); color: #fff; } .rp-quiz .rp-btn--primary:hover { background: var(--green-bright); } .rp-quiz .rp-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .rp-quiz .rp-btn--ghost:hover { border-color: var(--green); color: var(--green-ink); } /* Navigation */ .rp-quiz-next { margin-top: 20px; width: 100%; } .rp-quiz-nav { margin-top: 16px; } .rp-quiz-back { background: none; border: none; color: var(--muted); font-family: var(--body); font-size: 14px; cursor: pointer; padding: 4px 0; } .rp-quiz-back:hover { color: var(--green); } /* Écran de fin */ .rp-quiz-done { text-align: center; } .rp-quiz-tick { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 999px; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; } .rp-quiz-note { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 22px; } .rp-quiz-payload { text-align: left; background: var(--mint); border-radius: var(--radius-sm); padding: 14px; font-family: var(--mono); font-size: 12px; color: var(--ink); overflow-x: auto; } /* Mobile : carte moins étriquée (bords/rayon réduits) + tuiles plus compactes → plus de largeur utile pour le contenu sur petit écran (tous sites). */ @media (max-width: 560px) { .rp-quiz-card { padding: 18px 14px; border-radius: var(--radius-sm); } .rp-quiz-tile { padding: 16px 8px; } } /* Mode focus « plein écran » : le quiz prend toute la page dès la 1re réponse (tous appareils). Piloté par rp-quiz.js (classe .rp-quiz--full sur le point de montage portalisé vers ). */ body.rp-quiz-open { overflow: hidden; } .rp-quiz--full { position: fixed; inset: 0; z-index: 100000; background: var(--cream, #f7f5ef); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; padding: clamp(16px, 4vw, 48px); animation: rp-quiz-fs-in .18s ease; } .rp-quiz--full .rp-quiz-card { width: 100%; max-width: 640px; margin: auto; position: relative; } .rp-quiz-close { position: fixed; top: 14px; right: 14px; z-index: 100001; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 11px; background: var(--card, #fff); color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s; } .rp-quiz-close:hover { background: color-mix(in srgb, var(--ink) 6%, var(--card, #fff)); border-color: var(--muted); } @keyframes rp-quiz-fs-in { from { opacity: 0 } to { opacity: 1 } } @media (prefers-reduced-motion: reduce) { .rp-quiz-card, .rp-quiz-tile, .rp-quiz-bar-fill { animation: none !important; transition: none !important; } .rp-quiz--full { animation: none !important; } }